/**
 * historie-nordic.css — Nordic Clean design pro stránku Historie měření
 * (10 záložek: dnes/vcera/hodiny/mesic/rok/trendy/porovnani/rekordy/noaa/log)
 *
 * Celý layout je scoped pod .page-histnord aby se nemíchal s existujícími
 * pages/historic.css (legacy Chart.js varianta).
 */

.page-histnord {
  --hn-green:#66BC29; --hn-green-deep:#4A9B1D; --hn-green-50:#F1F9EA; --hn-green-100:#E1F2D1;
  --hn-blue:#002072; --hn-blue-deep:#001550; --hn-blue-700:#0A2F8A; --hn-blue-50:#EEF1FA; --hn-blue-100:#DCE3F3;
  --hn-ink:#0F1933; --hn-ink-soft:#3D4869; --hn-ink-muted:#727A92; --hn-ink-faint:#A5ACBF;
  --hn-line:#ECEEF4; --hn-line-strong:#DDE1EB; --hn-bg:#FBFBFD; --hn-surface:#FFFFFF;
  --hn-warn:#E8994F; --hn-alert:#C03030; --hn-info:#3B6DB8;
  --hn-t-frost:#1B4B8C; --hn-t-cold:#4F82BF; --hn-t-cool:#A8C1DE; --hn-t-neutral:#ECEEF4;
  --hn-t-mild:#F4D07A; --hn-t-warm:#E89B4F; --hn-t-hot:#D85A2F; --hn-t-extreme:#A82215;
  --hn-p-none:#F7F8FB; --hn-p-trace:#DBE9D1; --hn-p-light:#A8D084; --hn-p-mod:#66BC29; --hn-p-heavy:#2B7F12; --hn-p-extreme:#0A4A08;
  background: var(--hn-bg);
  color: var(--hn-ink);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.page-histnord h1, .page-histnord h2, .page-histnord h3, .page-histnord h4 { font-weight:500; }
.page-histnord em { font-style:italic; }
.page-histnord a { color: inherit; text-decoration: none; }
.page-histnord .tabular { font-variant-numeric: tabular-nums; }
.page-histnord .serif { font-family: 'Instrument Serif', 'Cormorant Garamond', serif; font-weight: 400; }

/* LAYOUT ----------------------------------------------------------------- */
.histnord-shell {
  /* Historie má širší base (1440 px) kvůli heatmapám a year-review tabulkám.
     Token var(--max-content) je 1320 px, takže používáme max() — udrží 1440 px
     na FHD a větším, a na velkých monitorech (≥2000 px) se aktivuje scaling
     z design-tokens.css clamp(1320, 70vw, 1800). */
  max-width: max(1440px, var(--max-content));
  margin: 0 auto;
  padding: 32px 40px 80px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
}
.histnord-sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
}
.histnord-side-title {
  font-size: 11px;
  color: var(--hn-ink-faint);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 14px;
  padding-left: 14px;
}
.histnord-side-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 26px;
}
.histnord-side-nav button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  text-align: left;
  font-size: 14px;
  color: var(--hn-ink-soft);
  transition: background .12s, color .12s;
}
.histnord-side-nav button:hover { background: var(--hn-bg); color: var(--hn-ink); }
.histnord-side-nav button.is-active { background: var(--hn-blue-50); color: var(--hn-blue); font-weight: 500; }
/* Externí link (jiná stránka — viz heatmapa.php). Stejný look jako buttony,
   pro vizuální jednotu sidebar navigace. */
.histnord-side-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--hn-ink-soft);
  text-align: left;
  transition: background .15s, color .15s;
}
.histnord-side-link:hover { background: var(--hn-bg); color: var(--hn-ink); }
.histnord-side-nav .ico {
  width: 18px; height: 18px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: .7;
}
/* SVG ikony (heatmapa atd.) — kontrolujeme přes parent button color */
.histnord-side-nav .ico--svg svg { width: 100%; height: 100%; display: block; }
.histnord-side-nav button.is-active .ico { opacity: 1; }
.histnord-side-meta {
  border-top: 1px solid var(--hn-line);
  padding: 16px 14px 0;
  font-size: 11px;
  color: var(--hn-ink-muted);
  line-height: 1.6;
}
.histnord-side-meta strong { color: var(--hn-ink); }

/* CONTENT ---------------------------------------------------------------- */
.histnord-content { min-width: 0; }
.hn-crumbs { font-size: 12px; color: var(--hn-ink-muted); margin-bottom: 16px; }
.hn-crumbs a { color: var(--hn-blue); }
.hn-page-title {
  font-family: 'Instrument Serif', 'Cormorant Garamond', serif;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  font-weight: 400;
}
.hn-page-title em { color: var(--hn-blue); }
.hn-page-sub {
  color: var(--hn-ink-soft);
  font-size: 14px;
  max-width: 720px;
  margin-bottom: 32px;
  line-height: 1.6;
}

.hn-panel { display: none; }
.hn-panel.is-active { display: block; animation: hn-fadeIn .25s ease; }
@keyframes hn-fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* CARDS ------------------------------------------------------------------ */
.hn-card {
  background: var(--hn-surface);
  border: 1px solid var(--hn-line);
  border-radius: 20px;
  padding: 28px;
  position: relative;
}
.hn-card-accent {
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 3px;
  border-radius: 0 0 3px 3px;
}
.hn-card-accent.temp  { background: linear-gradient(90deg, var(--hn-t-cold), var(--hn-t-warm)); }
.hn-card-accent.hum   { background: var(--hn-info); }
.hn-card-accent.rain  { background: var(--hn-green); }
.hn-card-accent.wind  { background: #D4C94E; }
.hn-card-accent.press { background: var(--hn-blue-700); }
.hn-card-accent.sun   { background: var(--hn-warn); }
.hn-card-accent.soil  { background: #8B6F3C; }
.hn-card-accent.aq    { background: #B2AEDB; }
.hn-card-accent.sys   { background: var(--hn-ink-muted); }

.hn-card h3 {
  font-size: 14px;
  font-weight: 500;
  color: var(--hn-ink);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}
.hn-card h3 .note {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--hn-ink-faint);
  font-weight: 400;
}

.hn-stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px dashed var(--hn-line);
  font-size: 13px;
}
.hn-stat-row:last-child { border-bottom: none; }
.hn-stat-row .k { color: var(--hn-ink-soft); }
.hn-stat-row .v { font-weight: 500; font-variant-numeric: tabular-nums; }
.hn-stat-row .v strong { font-weight: 600; color: var(--hn-ink); }
.hn-stat-row .v .tm { color: var(--hn-ink-faint); font-size: 11px; margin-left: 6px; }
.hn-stat-row.dim .v { color: var(--hn-ink-faint); }

.hn-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.hn-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hn-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* CHART TOOLTIP --------------------------------------------------------- */
/* Sdílený plovoucí tooltip pro všechny sloupcové grafy — okamžitý hover,
   tmavý background, šipka směrem na cílový sloupec, zalamuje text.
   JS handler v historie-nordic.js přidává/odebírá [aria-hidden].
   Cílové sloupce mají atribut data-chart-tip="..." místo title=. */
.chart-tooltip {
  position: absolute;
  z-index: 9999;
  background: rgba(15, 25, 51, 0.95);
  color: #FFFFFF;
  padding: 9px 13px;
  border-radius: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.45;
  font-feature-settings: 'tnum';
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(15, 25, 51, 0.28), 0 2px 6px rgba(15, 25, 51, 0.15);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .14s ease, transform .14s ease;
  left: 0; top: 0;
}
.chart-tooltip[aria-hidden="false"] { opacity: 1; transform: translateY(0); }
.chart-tooltip strong {
  display: inline-block;
  font-weight: 600;
  color: #FFFFFF;
  margin-right: 6px;
  border-right: 1px solid rgba(255,255,255,0.18);
  padding-right: 8px;
}
.chart-tooltip em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.chart-tooltip__arrow {
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgba(15, 25, 51, 0.95);
  transform: rotate(45deg);
}
.chart-tooltip[data-placement="top"] .chart-tooltip__arrow {
  bottom: -4px;
}
.chart-tooltip[data-placement="bottom"] .chart-tooltip__arrow {
  top: -4px;
}
/* Cílové sloupce — kurzor pointer pro signalizaci interaktivity */
[data-chart-tip] { cursor: pointer; }

/* SECTION HEADERS ------------------------------------------------------- */
.hn-sh {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 40px 0 18px;
  gap: 24px;
}
.hn-sh h2 {
  font-family: 'Instrument Serif', 'Cormorant Garamond', serif;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 400;
}
.hn-sh h2 em { color: var(--hn-blue); }
.hn-sh .hn-sh-sub { font-size: 12px; color: var(--hn-ink-muted); max-width: 75ch; line-height: 1.55; }
.hn-sh .hn-sh-right { display: flex; align-items: center; gap: 8px; }

/* CONTROLS -------------------------------------------------------------- */
.hn-seg {
  display: inline-flex;
  gap: 2px;
  background: var(--hn-bg);
  padding: 3px;
  border-radius: 22px;
  border: 1px solid var(--hn-line);
}
.hn-seg button {
  border: none;
  background: none;
  padding: 7px 14px;
  font: 500 12px/1 'Inter';
  color: var(--hn-ink-soft);
  border-radius: 18px;
  cursor: pointer;
  font-family: inherit;
}
.hn-seg button.is-active {
  background: var(--hn-surface);
  color: var(--hn-blue);
  box-shadow: 0 1px 2px rgba(0,32,114,0.1);
}
.hn-select {
  padding: 8px 30px 8px 12px;
  font: 500 12px/1 'Inter';
  color: var(--hn-ink);
  background: var(--hn-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%233D4869' d='M5 6L0 0h10z'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--hn-line-strong);
  border-radius: 8px;
  cursor: pointer;
  appearance: none;
  font-family: inherit;
}

/* Date picker pro výběr dne v hodinových datech */
.hn-date-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--hn-ink-soft);
}
.hn-date-pick__lbl {
  font-weight: 500;
}
.hn-input[type="date"] {
  padding: 7px 10px;
  font: 500 13px/1 'Inter', sans-serif;
  color: var(--hn-ink);
  background: var(--hn-surface);
  border: 1px solid var(--hn-line-strong);
  border-radius: 8px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.hn-input[type="date"]:hover { border-color: var(--hn-blue, #2E5B9E); }
.hn-input[type="date"]:focus {
  outline: 2px solid rgba(46,91,158,0.25);
  outline-offset: 1px;
  border-color: var(--hn-blue, #2E5B9E);
}
.hn-btn-clear {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 12px;
  font: 500 12px/1 'Inter', sans-serif;
  color: var(--hn-ink-soft);
  background: transparent;
  border: 1px solid var(--hn-line);
  border-radius: 8px;
  text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.hn-btn-clear:hover {
  color: var(--hn-ink);
  border-color: var(--hn-line-strong);
  background: var(--hn-bg);
}

/* RECORDS HERO --------------------------------------------------------- */
.hn-rec-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 28px; }
.hn-rec-card {
  padding: 32px 28px;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  background: var(--hn-surface);
  border: 1px solid var(--hn-line);
}
.hn-rec-card.hot  { background: linear-gradient(155deg, #FEF2EA 0%, #FFF 55%); border-color: #F5C9A5; }
.hn-rec-card.cold { background: linear-gradient(155deg, #EAF1FB 0%, #FFF 55%); border-color: #B9CDE8; }
.hn-rec-card.wind { background: linear-gradient(155deg, #F6F3DF 0%, #FFF 55%); border-color: #D5CA7E; }
.hn-rec-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  font-size: 22px;
}
.hn-rec-card.hot  .hn-rec-icon { background: #FCE3CE; color: #C04B12; }
.hn-rec-card.cold .hn-rec-icon { background: #D7E5F5; color: #1F4A8A; }
.hn-rec-card.wind .hn-rec-icon { background: #EAE2A0; color: #7A6A1E; }
.hn-rec-card .r-label {
  font-size: 11px; color: var(--hn-ink-muted);
  text-transform: uppercase; letter-spacing: .08em;
}
.hn-rec-card .r-val {
  font-family: 'Instrument Serif', 'Cormorant Garamond', serif;
  font-size: 64px; line-height: 1; margin-top: 4px; color: var(--hn-ink);
  font-weight: 400;
}
.hn-rec-card .r-val sub {
  font-family: 'Inter'; font-size: 18px; color: var(--hn-ink-muted);
  font-weight: 400; margin-left: 4px; vertical-align: bottom;
}
.hn-rec-card .r-when { margin-top: 14px; font-size: 13px; color: var(--hn-ink-soft); }
.hn-rec-card .r-when strong { color: var(--hn-ink); }

/* =========================================================================
   REKORDY V2 — kompletní katalog s top 10 expand
   Filter chips (kategorie skok) + 7 sekcí s 2-5 kartami každá.
   Karta: arrow ↑/↓ + label + velká hodnota + datum + tlačítko top 10.
   ========================================================================= */
.hn-rec-filter {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 28px 0 32px;
  padding: 6px;
  background: var(--hn-surface);
  border: 1px solid var(--hn-line);
  border-radius: 99px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  /* Sticky chip bar — drží nahoře pod sticky topbarem při scrollu sekcemi */
  position: sticky;
  top: 80px;
  z-index: 10;
}
.hn-rec-chip {
  --chip-c: var(--hn-ink-soft);
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  border-radius: 99px;
  color: var(--hn-ink-soft);
  text-decoration: none;
  font: 500 12.5px 'Inter', sans-serif;
  letter-spacing: .2px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.hn-rec-chip:hover {
  background: rgba(15, 25, 51, .04);
  color: var(--hn-ink);
}
.hn-rec-chip.is-active {
  background: var(--hn-ink, #0F1933);
  color: #FFFEFA;
  box-shadow: 0 1px 3px rgba(15,25,51,.12);
}
/* Kategoriální chip — barevný indikátor vlevo */
.hn-rec-chip:not([data-cat="all"])::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--chip-c);
  margin-right: 7px;
}

.hn-rec-cat {
  --cat-c: var(--hn-ink-soft);
  margin-bottom: 48px;
}
/* Skrytá kategorie — `hidden` atribut dává display:none nativně, explicitně
   pro jistotu (kdyby `.hn-rec-cat` v budoucnu dostal display override). */
.hn-rec-cat[hidden] { display: none; }
.hn-rec-cat-title {
  font-family: 'Instrument Serif', serif;
  font-weight: 400; font-style: italic;
  font-size: 28px;
  color: var(--hn-ink);
  margin: 0 0 18px;
  padding-left: 14px;
  border-left: 4px solid var(--cat-c);
  line-height: 1.2;
}
.hn-rec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.hn-rec-card2 {
  background: var(--hn-surface);
  border: 1px solid var(--hn-line);
  border-radius: 16px;
  padding: 18px 20px 16px;
  display: flex; flex-direction: column;
  position: relative;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.hn-rec-card2:hover {
  border-color: var(--cat-c, var(--hn-line-strong));
  box-shadow: 0 6px 24px rgba(15, 25, 51, .05);
}
.hn-rec-card2.is-empty {
  opacity: .55;
}
.hn-rec-card2__head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 8px;
}
.hn-rec-card2__arrow {
  font-size: 14px;
  color: var(--cat-c, var(--hn-ink-faint));
  font-weight: 600;
  line-height: 1;
}
.hn-rec-card2__title {
  font: 600 12px 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--hn-ink-muted);
  margin: 0;
  line-height: 1.3;
}
.hn-rec-card2__val {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  display: flex; align-items: baseline; gap: 5px;
  margin-bottom: 4px;
  line-height: 1;
}
.hn-rec-card2__val .v {
  font-size: 36px;
  color: var(--hn-ink);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.hn-rec-card2__val .u {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--hn-ink-muted);
  font-weight: 400;
}
.hn-rec-card2__when {
  font-size: 12px;
  color: var(--hn-ink-soft);
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
.hn-rec-card2__help {
  font-size: 11.5px;
  color: var(--hn-ink-muted);
  line-height: 1.45;
  margin: 0 0 12px;
}
/* Top 10 seznam — VŽDY viditelný pod hlavním rekordem karty (bez tlačítka).
   #1 zlatě zvýrazněný, liché řádky drobně šedé. */
.hn-rec-top10 {
  list-style: none;
  margin: 12px -4px -4px;
  padding: 12px 4px 4px;
  border-top: 1px dashed var(--hn-line);
  display: flex; flex-direction: column;
  gap: 4px;
}
.hn-rec-top10 li {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 12.5px;
}
.hn-rec-top10 li:nth-child(odd) { background: rgba(15, 25, 51, .025); }
.hn-rec-top10 li:nth-child(1)  { background: rgba(255, 215, 80, .14); }  /* zlatá pro #1 */
.hn-rec-top10__rank {
  font-weight: 600;
  color: var(--hn-ink-faint);
  text-align: right;
}
.hn-rec-top10 li:nth-child(1) .hn-rec-top10__rank { color: #B8841F; }
.hn-rec-top10__val {
  font-family: 'Instrument Serif', serif;
  font-size: 14px;
  color: var(--hn-ink);
}
.hn-rec-top10__val .u {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  color: var(--hn-ink-muted);
}
.hn-rec-top10__date {
  font-size: 11.5px;
  color: var(--hn-ink-soft);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Mobile — chips scrollable, karty na jeden sloupec */
@media (max-width: 600px) {
  .hn-rec-filter { gap: 4px; top: 72px; padding: 4px; }
  .hn-rec-chip { padding: 6px 10px; font-size: 12px; }
  .hn-rec-grid { grid-template-columns: 1fr; }
  .hn-rec-cat-title { font-size: 24px; padding-left: 10px; border-left-width: 3px; }
  .hn-rec-card2__val .v { font-size: 32px; }
}

/* TABLES --------------------------------------------------------------- */
.hn-tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--hn-surface);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--hn-line);
}
.hn-tbl th, .hn-tbl td {
  padding: 10px 14px;
  text-align: left;
  font-size: 12.5px;
  border-bottom: 1px solid var(--hn-line);
}
.hn-tbl th {
  font-weight: 500;
  color: var(--hn-ink-soft);
  background: var(--hn-bg);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.hn-tbl tr:last-child td { border-bottom: none; }
.hn-tbl td.num, .hn-tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.hn-tbl td.dim { color: var(--hn-ink-muted); }

/* Compact varianta — menší padding pro tabulky s mnoha sloupci */
.hn-tbl.hn-tbl--compact th,
.hn-tbl.hn-tbl--compact td {
  padding: 7px 9px;
  font-size: 11.5px;
}
.hn-tbl.hn-tbl--compact th { font-size: 10px; letter-spacing: .04em; }

/* Wrap pro vodorovné rolování širokých tabulek */
.hn-table-wrap {
  background: var(--hn-surface);
  border: 1px solid var(--hn-line);
  border-radius: 16px;
  overflow: auto;
}
.hn-table-wrap .hn-tbl {
  border: none;
  border-radius: 0;
  min-width: 100%;
}

/* HEATMAP ------------------------------------------------------------- */
.hn-hm-wrap {
  background: var(--hn-surface);
  border: 1px solid var(--hn-line);
  border-radius: 20px;
  overflow: hidden;
}
.hn-hm-head {
  padding: 22px 28px;
  border-bottom: 1px solid var(--hn-line);
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
}
.hn-hm-head h3 {
  font-family: 'Instrument Serif', 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 400;
}
.hn-hm-head h3 em { color: var(--hn-blue); }
.hn-hm-scale {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--hn-ink-muted);
}
.hn-hm-scale .bar {
  display: flex; width: 160px; height: 8px;
  border-radius: 4px; overflow: hidden;
}
.hn-hm-scale .bar span { flex: 1; }

.hn-hm-grid { padding: 20px 28px 28px; overflow-x: auto; }
table.hn-heatmap {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
table.hn-heatmap th {
  padding: 8px 6px;
  font-weight: 500;
  font-size: 10.5px;
  color: var(--hn-ink-soft);
  text-transform: uppercase;
  letter-spacing: .06em;
  text-align: center;
  background: transparent;
  border: 0;
}
table.hn-heatmap th.row-head {
  text-align: right;
  padding-right: 12px;
  font-size: 12px;
  color: var(--hn-ink);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  width: 54px;
}
table.hn-heatmap td { padding: 0; border: 0; }
.hn-hm-cell {
  display: block;
  width: 100%;
  height: 48px;
  line-height: 1.15;
  padding-top: 6px;
  text-align: center;
  color: var(--hn-ink);
  font-weight: 500;
  font-size: 11px;
  border-radius: 4px;
  margin: 1px;
}
.hn-hm-cell .v { display: block; font-size: 9.5px; opacity: .75; font-weight: 400; margin-top: 2px; }
.hn-hm-cell.empty { background: transparent; color: var(--hn-ink-faint); }
.hn-hm-cell.rec { box-shadow: inset 0 0 0 2px var(--hn-blue); }

/* ROK — teplotní rozsahy --------------------------------------------- */
.hn-yrv-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 28px 14px;
  border-bottom: 1px solid var(--hn-line);
}
.hn-yrv-bands { display: flex; gap: 4px; flex: 1; max-width: 520px; }
.hn-yrv-band {
  flex: 1; text-align: center;
  padding: 7px 6px; border-radius: 6px;
  font-size: 10.5px; font-weight: 500;
  text-transform: lowercase; letter-spacing: .02em;
}
/* Default (temp) — chip labels v 5 stupních pásem */
.hn-yrv-b1 { background: #D7E2F2; color: #123C77; }
.hn-yrv-b2 { background: #E3EAF3; color: #2F4A7A; }
.hn-yrv-b3 { background: #EEF4EA; color: #4A6B3A; }
.hn-yrv-b4 { background: #FAEBD0; color: #8B6A28; }
.hn-yrv-b5 { background: #F7D9C5; color: #8B3309; }

/* Humidity bands — sušší tóny vlevo, vlhčí vpravo */
.hn-yrv-bands--humidity .hn-yrv-b1 { background: #F2E5C4; color: #7A5A1A; }
.hn-yrv-bands--humidity .hn-yrv-b2 { background: #EBE7CC; color: #6A5C20; }
.hn-yrv-bands--humidity .hn-yrv-b3 { background: #DCE7DA; color: #3B5B3A; }
.hn-yrv-bands--humidity .hn-yrv-b4 { background: #C9DAE5; color: #2E5078; }
.hn-yrv-bands--humidity .hn-yrv-b5 { background: #B9CFE1; color: #1F3D6A; }

/* Pressure bands — nízký (bouřkový) → vysoký (anticyklonální) */
.hn-yrv-bands--pressure .hn-yrv-b1 { background: #D9D0BD; color: #5C4A2C; }
.hn-yrv-bands--pressure .hn-yrv-b2 { background: #E2DCC9; color: #6B5832; }
.hn-yrv-bands--pressure .hn-yrv-b3 { background: #ECEAE0; color: #5A5040; }
.hn-yrv-bands--pressure .hn-yrv-b4 { background: #EADBC3; color: #7A5C28; }
.hn-yrv-bands--pressure .hn-yrv-b5 { background: #E5C99B; color: #80541A; }

/* Wind bands — klidný (světlý) → vichřičný (tmavý) */
.hn-yrv-bands--wind .hn-yrv-b1 { background: #ECEEF3; color: #4A5260; }
.hn-yrv-bands--wind .hn-yrv-b2 { background: #DCDEE5; color: #3E4654; }
.hn-yrv-bands--wind .hn-yrv-b3 { background: #BFC4CD; color: #2F3640; }
.hn-yrv-bands--wind .hn-yrv-b4 { background: #8E97A4; color: #FFFFFF; }
.hn-yrv-bands--wind .hn-yrv-b5 { background: #4D5462; color: #FFFFFF; }

/* Rain bands — sucho (krémově) → mokro (mech) */
.hn-yrv-bands--rain .hn-yrv-b1 { background: #F2E9D2; color: #6A5A22; }
.hn-yrv-bands--rain .hn-yrv-b2 { background: #DBE3CF; color: #4A5B30; }
.hn-yrv-bands--rain .hn-yrv-b3 { background: #B7CDB0; color: #2D4A2A; }
.hn-yrv-bands--rain .hn-yrv-b4 { background: #7DA590; color: #1B3525; }
.hn-yrv-bands--rain .hn-yrv-b5 { background: #3D6B5A; color: #FFFFFF; }

/* Sun bands — zima/málo (světle krémové) → jasno (sytě oranžové) */
.hn-yrv-bands--sun .hn-yrv-b1 { background: #ECECEC; color: #5A5A5A; }
.hn-yrv-bands--sun .hn-yrv-b2 { background: #F5E8C4; color: #7A6520; }
.hn-yrv-bands--sun .hn-yrv-b3 { background: #F4D58E; color: #7A5320; }
.hn-yrv-bands--sun .hn-yrv-b4 { background: #E8B14A; color: #50300A; }
.hn-yrv-bands--sun .hn-yrv-b5 { background: #D0631E; color: #FFFFFF; }

/* UV bands — nízké (zelené) → extrémní (rudé) */
.hn-yrv-bands--uv .hn-yrv-b1 { background: #C2D8A0; color: #3F5A1A; }
.hn-yrv-bands--uv .hn-yrv-b2 { background: #E4DCA2; color: #5C5018; }
.hn-yrv-bands--uv .hn-yrv-b3 { background: #E8B14A; color: #5C3D10; }
.hn-yrv-bands--uv .hn-yrv-b4 { background: #D0631E; color: #FFFFFF; }
.hn-yrv-bands--uv .hn-yrv-b5 { background: #7B1F1F; color: #FFFFFF; }
.hn-yrv-legend-right {
  display: flex; align-items: center; gap: 16px;
  font-size: 11.5px; color: var(--hn-ink-soft);
}
.hn-yrv-dot {
  display: inline-block; width: 11px; height: 11px;
  border-radius: 50%; margin-right: 2px; vertical-align: -1px;
}
.hn-yrv-dot-min { background: #4F82BF; box-shadow: 0 0 0 2px #E8EFF8; }
.hn-yrv-dot-avg {
  width: 11px; height: 11px; border-radius: 2px;
  background: var(--hn-ink); transform: rotate(45deg);
}
.hn-yrv-dot-max { background: #D85A2F; box-shadow: 0 0 0 2px #FBEBE0; }

.hn-yrv-axis { padding: 14px 28px 0; position: relative; }
.hn-yrv-axis-inner {
  position: relative; height: 22px;
  margin-left: 116px; margin-right: 116px;
  border-top: 1px solid var(--hn-line-strong);
}
.hn-yrv-tick {
  position: absolute; top: -1px;
  width: 1px; height: 8px;
  background: var(--hn-line-strong);
  transform: translateX(-0.5px);
}
.hn-yrv-tick-label {
  position: absolute; top: 10px;
  font-size: 10.5px; color: var(--hn-ink-muted);
  transform: translateX(-50%);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hn-yrv-tick.zero { background: var(--hn-blue); height: 12px; }
.hn-yrv-tick.zero + .hn-yrv-tick-label { color: var(--hn-blue); font-weight: 500; }

.hn-yrv-list { padding: 10px 28px 24px; }
.hn-yrv-row {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hn-line);
  position: relative;
  cursor: pointer;
  transition: background .12s;
}
.hn-yrv-row:last-child { border-bottom: none; }
.hn-yrv-row:hover { background: var(--hn-bg); }
.hn-yrv-row:hover .hn-yrv-marker-avg::after { opacity: 1; }
.hn-yrv-row.empty { opacity: .4; }

.hn-yrv-month-label { display: flex; align-items: baseline; gap: 8px; }
.hn-yrv-month-label .nm {
  font-family: 'Instrument Serif', 'Cormorant Garamond', serif;
  font-size: 18px; color: var(--hn-ink);
}

.hn-yrv-track { position: relative; height: 26px; }
.hn-yrv-track-bg {
  position: absolute; inset: 8px 0;
  border-radius: 4px;
  background: linear-gradient(to right,
    #D7E2F2 0%,  #D7E2F2 22%,
    #E3EAF3 22%, #E3EAF3 40%,
    #EEF4EA 40%, #EEF4EA 60%,
    #FAEBD0 60%, #FAEBD0 80%,
    #F7D9C5 80%, #F7D9C5 100%
  );
  opacity: .55;
}
.hn-yrv-track-line {
  position: absolute; top: 50%; height: 4px;
  background: linear-gradient(to right, #4F82BF 0%, #D85A2F 100%);
  border-radius: 2px;
  transform: translateY(-50%);
  box-shadow: 0 0 0 2px #fff;
}
.hn-yrv-marker {
  position: absolute; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.hn-yrv-marker-min {
  width: 12px; height: 12px; border-radius: 50%;
  background: #4F82BF; border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(30,60,110,.35);
}
.hn-yrv-marker-max {
  width: 12px; height: 12px; border-radius: 50%;
  background: #D85A2F; border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(180,60,20,.35);
}
.hn-yrv-marker-avg {
  width: 12px; height: 12px;
  background: var(--hn-ink);
  transform: translate(-50%, -50%) rotate(45deg);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  position: absolute; top: 50%;
  z-index: 3;
}
.hn-yrv-marker-avg::after {
  content: attr(data-val);
  position: absolute; left: 50%; bottom: calc(100% + 6px);
  transform: translateX(-50%) rotate(-45deg);
  background: var(--hn-ink); color: #fff;
  padding: 3px 7px; border-radius: 5px;
  font-family: 'Inter'; font-size: 10.5px; font-weight: 500;
  white-space: nowrap;
  opacity: 0; transition: opacity .15s;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.hn-yrv-values {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  font-size: 11.5px; font-variant-numeric: tabular-nums;
}
.hn-yrv-values .vmin { color: #2F5AA0; font-weight: 500; }
.hn-yrv-values .vsep { color: var(--hn-ink-faint); }
.hn-yrv-values .vmax { color: #B24820; font-weight: 500; }

/* — Metric switcher pro roční přehled (jako u heatmapy) — */
.hn-yrv-metrics {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 8px 0 12px;
}
.hn-yrv-metric {
  appearance: none; border: 1px solid var(--hn-line);
  background: var(--hn-surface); color: var(--hn-ink-soft);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12.5px; font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.hn-yrv-metric:hover { background: var(--hn-bg); color: var(--hn-ink); }
.hn-yrv-metric.is-active {
  background: var(--hn-ink); color: #FFFEFA;
  border-color: var(--hn-ink);
}

/* — Description box pro roční přehled — */
.hn-yrv-description {
  background: linear-gradient(180deg, #FFFEFA 0%, #F8F5EC 100%);
  border: 1px solid var(--hn-line);
  border-left: 3px solid #66BC29;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13.5px;
  line-height: 1.5;
}
.hn-yrv-description__label {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: #2E5B9E;
  letter-spacing: 0.2px;
}
.hn-yrv-description__text {
  color: var(--hn-ink-soft);
  font-size: 13px;
}

/* — Single-dot mode (dot): jeden marker bez track-line — */
.hn-yrv-marker-avg.hn-yrv-marker-solo {
  background: #5C7AAD;
  width: 13px; height: 13px;
}

/* — Bar mode: horizontal bar od 0 + end-label — */
.hn-yrv-track-bar {
  position: absolute; top: 50%;
  left: 0; height: 8px;
  background: linear-gradient(to right, #BFC4CD 0%, #4D5462 100%);
  border-radius: 4px;
  transform: translateY(-50%);
  box-shadow: 0 0 0 2px #fff;
  z-index: 1;
}
.hn-yrv-marker-bar-end {
  position: absolute; top: 50%;
  transform: translate(-50%, -50%);
  width: 12px; height: 12px;
  background: #2E3A52; border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  z-index: 2;
}
.hn-yrv-marker-bar-end::after {
  content: attr(data-val);
  position: absolute; left: 50%; bottom: calc(100% + 6px);
  transform: translateX(-50%);
  background: var(--hn-ink); color: #fff;
  padding: 3px 7px; border-radius: 5px;
  font-family: 'Inter'; font-size: 10.5px; font-weight: 500;
  white-space: nowrap;
  opacity: 0; transition: opacity .15s;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.hn-yrv-row:hover .hn-yrv-marker-bar-end::after { opacity: 1; }

/* Track-bg variants podle aktivního metric — rain/sun/wind/etc. */
.hn-yrv-list[data-metric="humidity"] .hn-yrv-track-bg {
  background: linear-gradient(to right,
    #F2E5C4 0%,    #F2E5C4 25%,
    #DCE7DA 25%,   #DCE7DA 50%,
    #C9DAE5 50%,   #C9DAE5 75%,
    #B9CFE1 75%,   #B9CFE1 100%);
  opacity: .55;
}
.hn-yrv-list[data-metric="pressure"] .hn-yrv-track-bg {
  background: linear-gradient(to right,
    #D9D0BD 0%,    #D9D0BD 22%,
    #E2DCC9 22%,   #E2DCC9 44%,
    #ECEAE0 44%,   #ECEAE0 66%,
    #EADBC3 66%,   #EADBC3 84%,
    #E5C99B 84%,   #E5C99B 100%);
  opacity: .55;
}
.hn-yrv-list[data-metric="dewpoint"] .hn-yrv-track-bg {
  background: linear-gradient(to right,
    #D7E2F2 0%,  #D7E2F2 22%,
    #E3EAF3 22%, #E3EAF3 40%,
    #EEF4EA 40%, #EEF4EA 60%,
    #FAEBD0 60%, #FAEBD0 80%,
    #F7D9C5 80%, #F7D9C5 100%);
  opacity: .45;
}
.hn-yrv-list[data-metric="wind"] .hn-yrv-track-bg {
  background: linear-gradient(to right,
    #ECEEF3 0%,  #ECEEF3 22%,
    #DCDEE5 22%, #DCDEE5 40%,
    #BFC4CD 40%, #BFC4CD 60%,
    #8E97A4 60%, #8E97A4 80%,
    #4D5462 80%, #4D5462 100%);
  opacity: .55;
}
.hn-yrv-list[data-metric="rain"] .hn-yrv-track-bg {
  background: linear-gradient(to right,
    #F2E9D2 0%,  #DBE3CF 25%,
    #B7CDB0 50%, #7DA590 75%,
    #3D6B5A 100%);
  opacity: .45;
}
.hn-yrv-list[data-metric="sunhours"] .hn-yrv-track-bg {
  background: linear-gradient(to right,
    #ECECEC 0%,  #F5E8C4 25%,
    #F4D58E 50%, #E8B14A 75%,
    #D0631E 100%);
  opacity: .55;
}
.hn-yrv-list[data-metric="uv"] .hn-yrv-track-bg {
  background: linear-gradient(to right,
    #C2D8A0 0%, #C2D8A0 18%,
    #E4DCA2 18%, #E4DCA2 36%,
    #E8B14A 36%, #E8B14A 55%,
    #D0631E 55%, #D0631E 73%,
    #7B1F1F 73%, #7B1F1F 100%);
  opacity: .55;
}

/* Legend swatch pro bar mode */
.hn-yrv-bar-swatch {
  display: inline-block; width: 18px; height: 6px;
  background: linear-gradient(to right, #BFC4CD, #4D5462);
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: middle;
}

/* BADGES ------------------------------------------------------------- */
.hn-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}
.hn-badge.hot { background: #FCE3CE; color: #8B3309; }
.hn-badge.cold { background: #D7E5F5; color: #123C77; }
.hn-badge.neut { background: var(--hn-line); color: var(--hn-ink-soft); }
.hn-badge.wet { background: var(--hn-green-100); color: var(--hn-green-deep); }
.hn-badge.dry { background: #F6EFE2; color: #8B6E2B; }

/* COMPARE ------------------------------------------------------------ */
.hn-cmp-wrap {
  background: var(--hn-surface);
  border: 1px solid var(--hn-line);
  border-radius: 20px;
  padding: 28px;
}
.hn-cmp-controls {
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 24px; flex-wrap: wrap;
}
.hn-cmp-cols {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 20px; align-items: start;
}
.hn-cmp-label {
  font-size: 11px; color: var(--hn-ink-muted);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 10px;
}
.hn-cmp-period {
  font-family: 'Instrument Serif', 'Cormorant Garamond', serif;
  font-size: 26px; margin-bottom: 24px; font-weight: 400;
}
.hn-cmp-period em { color: var(--hn-blue); }
.hn-cmp-stat {
  padding: 12px 0;
  border-bottom: 1px dashed var(--hn-line);
  display: flex; justify-content: space-between;
  font-size: 13px;
}
.hn-cmp-stat .k { color: var(--hn-ink-soft); }
.hn-cmp-stat .v { font-weight: 500; font-variant-numeric: tabular-nums; }
.hn-cmp-vs {
  text-align: center; padding-top: 40px;
  font-family: 'Instrument Serif', 'Cormorant Garamond', serif;
  font-size: 14px; color: var(--hn-ink-faint); font-style: italic;
}
.hn-cmp-delta {
  font-size: 11px; padding: 2px 7px; border-radius: 10px;
  margin-left: 8px; font-weight: 500;
}
.hn-cmp-delta.up   { color: #8B3309; background: #FCE3CE; }
.hn-cmp-delta.down { color: #123C77; background: #D7E5F5; }
.hn-cmp-delta.same { color: var(--hn-ink-muted); background: var(--hn-line); }

/* NOAA --------------------------------------------------------------- */
.hn-noaa-list { display: flex; flex-direction: column; gap: 8px; }
.hn-noaa-item {
  background: var(--hn-surface);
  border: 1px solid var(--hn-line);
  border-radius: 14px;
  padding: 16px 22px;
  display: grid;
  grid-template-columns: 160px 1fr auto;
  align-items: center;
  gap: 16px;
  transition: border-color .12s, transform .12s;
  text-decoration: none;
}
.hn-noaa-item:hover { border-color: var(--hn-blue-100); }
.hn-noaa-date {
  font-family: 'Instrument Serif', 'Cormorant Garamond', serif;
  font-size: 20px; color: var(--hn-blue);
}
.hn-noaa-meta {
  font-size: 12px; color: var(--hn-ink-muted);
  display: flex; gap: 16px; flex-wrap: wrap;
}
.hn-noaa-meta strong { color: var(--hn-ink); font-weight: 500; }
.hn-noaa-dl {
  font-size: 12px; color: var(--hn-blue);
  display: flex; align-items: center; gap: 6px;
}

/* DECADE (trendy) --------------------------------------------------- */
.hn-decade-wrap { padding: 20px 28px 28px; overflow-x: auto; }
.hn-decade-row {
  display: grid;
  grid-template-columns: 50px repeat(12, 1fr);
  gap: 4px;
  align-items: center;
  margin-bottom: 4px;
}
.hn-decade-row.head .hn-decade-cell {
  background: none;
  color: var(--hn-ink-soft);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.hn-decade-year {
  font-family: 'Instrument Serif', 'Cormorant Garamond', serif;
  font-size: 16px;
  color: var(--hn-ink);
  text-align: right;
  padding-right: 8px;
}
.hn-decade-cell {
  height: 28px;
  border-radius: 3px;
  font-size: 10.5px;
  text-align: center;
  line-height: 28px;
  color: rgba(255,255,255,.95);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.hn-decade-cell.empty { background: var(--hn-line); color: var(--hn-ink-faint); }

/* INDEX KPI (roční — velké číslo) ------------------------------------ */
.hn-big-num {
  font-family: 'Instrument Serif', 'Cormorant Garamond', serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.05;
}
.hn-big-num.info   { color: var(--hn-info); }
.hn-big-num.frost  { color: var(--hn-t-frost); }
.hn-big-num.warn   { color: var(--hn-warn); }
.hn-big-num.alert  { color: var(--hn-alert); }
.hn-big-num.green  { color: var(--hn-green-deep); }
.hn-big-num.blue   { color: var(--hn-blue); }

/* FOOTER mini ------------------------------------------------------- */
.hn-foot {
  border-top: 1px solid var(--hn-line);
  margin-top: 60px;
  padding-top: 20px;
  text-align: center;
  font-size: 11px;
  color: var(--hn-ink-faint);
}

/* HEATMAP — row-head v <td> (JS používá td nikoli th) ---------------- */
table.hn-heatmap td.row-head {
  text-align: right;
  padding: 0 12px 0 0;
  font-size: 12px;
  color: var(--hn-ink);
  font-weight: 500;
  width: 54px;
}
.hn-hm-cell.empty {
  background: transparent;
  color: var(--hn-ink-faint);
  font-weight: 400;
}
.hn-hm-cell.rec { box-shadow: inset 0 0 0 2px var(--hn-blue); }

/* LOG panel stránkování --------------------------------------------- */
.hn-pg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  font-size: 13px;
  color: var(--hn-ink-soft);
  background: var(--hn-surface);
  border: 1px solid var(--hn-line);
  border-radius: 8px;
  text-decoration: none;
  transition: background .12s, color .12s, border-color .12s;
}
.hn-pg:hover { background: var(--hn-blue-50); color: var(--hn-blue); border-color: var(--hn-blue-100); }
.hn-pg.active {
  background: var(--hn-blue);
  color: #fff;
  border-color: var(--hn-blue);
  font-weight: 500;
}
.hn-pg-dot {
  display: inline-flex; align-items: center;
  color: var(--hn-ink-faint);
  padding: 0 4px;
  font-size: 14px;
}

/* HEATMAP: make td.dim empty rows legible (log table no-data) ------- */
.hn-tbl td.dim { color: var(--hn-ink-faint); }

/* YRV: prázdný řádek (měsíc bez dat) ------------------------------- */
.hn-yrv-row-empty { opacity: .5; cursor: default; }
.hn-yrv-row-empty:hover { background: transparent; }
.hn-yrv-row-empty .hn-yrv-values .vsep { font-style: italic; color: var(--hn-ink-faint); }

/* RESPONSIVE fallback (minimalistic) -------------------------------- */
@media (max-width: 960px) {
  .histnord-shell { grid-template-columns: 1fr; padding: 20px; }
  .histnord-sidebar { position: static; }
  .hn-grid-3 { grid-template-columns: 1fr; }
  .hn-grid-4 { grid-template-columns: 1fr 1fr; }
  .hn-rec-hero { grid-template-columns: 1fr; }
  .hn-cmp-cols { grid-template-columns: 1fr; }
  .hn-cmp-vs { padding: 20px 0; }
}

/* ============================================================================
   PANEL OVZDUŠÍ — heatmap day×hour, top 10, monthly stacked, empty-states
   ============================================================================ */
.aq-empty-card {
  text-align: center; padding: 32px 24px;
  background: linear-gradient(135deg, #F5F8F5 0%, #FAFCF7 100%);
  border: 1px dashed #C8D5C0;
  color: var(--hn-ink-soft);
}
.aq-empty-card .aq-empty-title {
  font-family: 'Instrument Serif', serif;
  font-size: 20px; color: var(--hn-ink); margin-bottom: 8px;
}
.aq-empty-card p {
  margin: 0; font-size: 13.5px; line-height: 1.55;
  max-width: 540px; display: inline-block;
}

/* Heatmap day × hour ---------------------------------------------------- */
.aq-heatmap-wrap {
  overflow-x: auto;
  margin-bottom: 14px;
}
.aq-heatmap {
  border-collapse: separate;
  border-spacing: 2px;  /* mezery mezi buňkami = čistší grid look */
  font-size: 11px;
  table-layout: fixed;
}
.aq-heatmap th, .aq-heatmap td {
  padding: 0;
  text-align: center;
  vertical-align: middle;
  font-family: 'Inter', sans-serif;
}
.aq-heatmap thead th {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--hn-ink-muted);
  padding: 0 2px 8px;
  width: 24px;
}
.aq-heatmap thead th.aq-corner {
  text-align: left;
  padding: 0 8px 8px 0;
  color: var(--hn-ink-soft);
  font-weight: 600;
  width: 78px;  /* prostor pro "Po 11. 5." label */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10px;
}
.aq-heatmap tbody th {
  text-align: right;
  padding: 0 10px 0 6px;
  color: var(--hn-ink-soft);
  font-weight: 500;
  font-size: 11.5px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
/* Weekend row labels — subtle distinction */
.aq-heatmap tbody th.is-weekend {
  color: var(--hn-ink-muted);
}
.aq-heatmap tbody td {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  background: #F2F4F8;
  cursor: default;
  position: relative;
}
/* Empty cells (no data) — barely visible gray check pattern */
.aq-heatmap tbody td:not([data-val]) {
  background:
    repeating-linear-gradient(
      45deg,
      #F2F4F8 0,
      #F2F4F8 3px,
      #EBEEF4 3px,
      #EBEEF4 5px
    );
}
.aq-heatmap tbody td[data-val] {
  cursor: help;
}
.aq-heatmap tbody td:hover[data-val] {
  outline: 2px solid var(--hn-ink);
  outline-offset: 1px;
  z-index: 2;
}
/* Subtle weekend column tint — víkendy mají jemně tmavší pozadí prázdných buněk
   pro vizuální rytmus (vidíte hned, kdy je víkend bez ohledu na data). */
.aq-heatmap tbody tr.is-weekend-row td:not([data-val]) {
  background:
    repeating-linear-gradient(
      45deg,
      #ECEEF4 0,
      #ECEEF4 3px,
      #E5E8F0 3px,
      #E5E8F0 5px
    );
}

/* Legend — sdílená pro heatmap i monthly */
.aq-legend {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 14px; padding-top: 12px;
  font-size: 12px; color: var(--hn-ink-soft);
  border-top: 1px solid var(--hn-line);
}
.aq-legend-title { font-weight: 600; color: var(--hn-ink); margin-right: 6px; }
.aq-legend-cell {
  display: inline-block; width: 16px; height: 16px;
  border-radius: 3px; vertical-align: middle;
}
.aq-legend-lbl { white-space: nowrap; }

/* Top 10 worst hours table -------------------------------------------- */
.aq-top10-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.aq-top10-table thead th {
  text-align: left;
  padding: 12px 16px;
  background: #F5F7FB;
  font-weight: 600;
  color: var(--hn-ink-soft);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--hn-line);
}
.aq-top10-table thead th.num { text-align: right; }
.aq-top10-table tbody td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--hn-line);
}
.aq-top10-table tbody tr:last-child td { border-bottom: 0; }
.aq-top10-table tbody td.rank {
  font-family: 'JetBrains Mono', monospace;
  color: var(--hn-ink-faint);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.aq-top10-table tbody td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.aq-top10-table tbody tr:nth-child(1) td.rank { color: #C03030; font-size: 15px; }
.aq-top10-table tbody tr:nth-child(2) td.rank { color: #E8744A; }
.aq-top10-table tbody tr:nth-child(3) td.rank { color: #E8B14A; }
.aq-cat-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c, #888) 14%, transparent);
  color: var(--c, #888);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: lowercase;
}

/* Monthly stacked bars ------------------------------------------------- */
.aq-monthly-wrap {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}
.aq-monthly-row {
  display: grid;
  grid-template-columns: 90px 1fr 90px;
  align-items: center;
  gap: 12px;
}
.aq-monthly-label {
  font-size: 12.5px;
  color: var(--hn-ink-soft);
  font-weight: 500;
  white-space: nowrap;
}
.aq-monthly-bar {
  display: flex;
  height: 22px;
  border-radius: 4px;
  overflow: hidden;
  background: #F2F4F8;
}
.aq-monthly-bar-seg {
  height: 100%;
  position: relative;
}
.aq-monthly-bar-seg[title]:hover {
  outline: 1px solid rgba(15,25,51,.5);
}
.aq-monthly-total {
  font-size: 11.5px;
  color: var(--hn-ink-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

@media (max-width: 720px) {
  .aq-monthly-row { grid-template-columns: 70px 1fr 60px; gap: 8px; }
  .aq-heatmap thead th, .aq-heatmap tbody td { width: 18px; }
  .aq-heatmap tbody td { height: 18px; }
}

/* ============================================================
   AQ ARCHIVE STATUS BANNER — jasná informace o stavu sběru dat
   Zobrazuje se nad heatmapou: text + ikona + 3× statistika + progress bar
   ============================================================ */
.aq-archive-status {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 20px;
  margin: 14px 0;
  border-radius: 12px;
  border: 1px solid var(--hn-line, #E2E5ED);
  background: rgba(102, 188, 41, 0.04);
}
.aq-archive-status[data-tone="ok"]   { background: rgba(79, 168, 230, 0.05); border-color: rgba(79, 168, 230, 0.20); }
.aq-archive-status[data-tone="warn"] { background: rgba(244, 185, 66, 0.08); border-color: rgba(244, 185, 66, 0.30); }
.aq-archive-status[data-tone="good"] { background: rgba(102, 188, 41, 0.06); border-color: rgba(102, 188, 41, 0.20); }

.aq-archive-status__head {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: start;
}
.aq-archive-status__icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(15, 25, 51, 0.05);
  font-size: 16px;
  color: var(--hn-ink, #0F1933);
}
.aq-archive-status[data-tone="warn"] .aq-archive-status__icon { background: rgba(244, 185, 66, 0.16); color: #C98A1A; }
.aq-archive-status[data-tone="good"] .aq-archive-status__icon { background: rgba(102, 188, 41, 0.16); color: #4A9B1D; }

.aq-archive-status__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.aq-archive-status__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--hn-ink, #0F1933);
  line-height: 1.3;
}
.aq-archive-status__text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--hn-ink-soft, #3D4869);
}
.aq-archive-status__text strong {
  color: var(--hn-ink, #0F1933);
  font-feature-settings: 'tnum';
}

/* Stats row — 3 čísla + progress bar */
.aq-archive-status__stats {
  display: grid;
  grid-template-columns: repeat(3, auto) 1fr;
  gap: 24px;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid rgba(15, 25, 51, 0.06);
}
.aq-archive-status__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.aq-archive-status__stat .k {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hn-ink-muted, #6B7390);
}
.aq-archive-status__stat .v {
  font-size: 13px;
  color: var(--hn-ink-soft, #3D4869);
  font-feature-settings: 'tnum';
}
.aq-archive-status__stat .v strong {
  font-size: 18px;
  font-weight: 500;
  color: var(--hn-ink, #0F1933);
  letter-spacing: -0.2px;
}
.aq-archive-status__bar {
  position: relative;
  height: 6px;
  background: rgba(15, 25, 51, 0.06);
  border-radius: 3px;
  overflow: hidden;
}
.aq-archive-status__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #B6C432 0%, #4A9B1D 100%);
  border-radius: 3px;
  transition: width .3s ease;
}
.aq-archive-status[data-tone="warn"] .aq-archive-status__bar-fill {
  background: linear-gradient(90deg, #F4B942 0%, #E8994F 100%);
}
.aq-archive-status[data-tone="good"] .aq-archive-status__bar-fill {
  background: linear-gradient(90deg, #B6C432 0%, #4A9B1D 100%);
}

@media (max-width: 720px) {
  .aq-archive-status__stats {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .aq-archive-status__bar { grid-column: 1 / -1; }
}

/* ============================================================
   AQ OVZDUŠÍ PANEL — MODERNÍ REDESIGN v2 (květen 2026)
   Inspirace: Apple Weather, Linear, Vercel dashboards
   Klíčové: gradient backgrounds, soft shadows, big numbers,
            sans-serif first (žádný italic serif pro data),
            hover lift + scale transitions
   ============================================================ */

/* ── 2) REKORDY: nejčistší + nejhorší den ─────────────────── */
.aq-records {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 18px 0;
}
.aq-record {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  align-items: center;
  padding: 22px 24px;
  border-radius: 18px;
  border: 1px solid rgba(15, 25, 51, 0.05);
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(15, 25, 51, 0.04), 0 4px 16px rgba(15, 25, 51, 0.03);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
  overflow: hidden;
}
.aq-record::before {
  /* Subtilní gradient ribbon nahoře místo solid border-left */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ribbon-from, #2EAD6F) 0%, var(--ribbon-to, #B6C432) 100%);
  opacity: 0.85;
}
.aq-record:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(15, 25, 51, 0.05), 0 12px 32px rgba(15, 25, 51, 0.08);
}
.aq-record--best  { --ribbon-from: #2EAD6F; --ribbon-to: #B6C432; }
.aq-record--worst { --ribbon-from: #E8B14A; --ribbon-to: #E8744A; }
.aq-record--worst[data-cat="vbad"] { --ribbon-from: #E8744A; --ribbon-to: #C03030; }
.aq-record--worst[data-cat="bad"]  { --ribbon-from: #E8B14A; --ribbon-to: #E8744A; }
.aq-record__badge {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0));
  position: relative;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.aq-record__badge svg {
  width: 28px;
  height: 28px;
}
.aq-record:hover .aq-record__badge { transform: rotate(-4deg) scale(1.05); }
.aq-record--best  .aq-record__badge {
  background: linear-gradient(135deg, rgba(46,173,111,0.18), rgba(182,196,50,0.06));
  color: #1F7849;
  box-shadow: inset 0 0 0 1px rgba(46, 173, 111, 0.08);
}
.aq-record--worst .aq-record__badge {
  background: linear-gradient(135deg, rgba(232,116,74,0.18), rgba(232,177,74,0.06));
  color: #8F3C1E;
  box-shadow: inset 0 0 0 1px rgba(232, 116, 74, 0.08);
}
.aq-record--worst[data-cat="vbad"] .aq-record__badge {
  background: linear-gradient(135deg, rgba(192,48,48,0.18), rgba(232,116,74,0.06));
  color: #8A2020;
}
.aq-record__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.aq-record__title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--hn-ink-muted, #6B7390);
}
.aq-record__date {
  /* Sans-serif místo italic serif — modernější, čitelnější */
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--hn-ink-soft, #4A5260);
  letter-spacing: -0.1px;
  font-feature-settings: 'tnum';
}
.aq-record__value { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.aq-record__num {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 40px;
  font-weight: 200;
  letter-spacing: -1.2px;
  line-height: 1;
  color: var(--hn-ink, #0F1933);
  font-feature-settings: 'tnum';
}
.aq-record--best .aq-record__num  { color: #1F7849; }
.aq-record--worst .aq-record__num { color: #8F3C1E; }
.aq-record__unit { font-size: 12px; color: var(--hn-ink-muted, #6B7390); font-weight: 500; }
.aq-record__unit small { font-size: 10.5px; opacity: 0.75; font-weight: 400; }
.aq-record__pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 6px;
  width: max-content;
}

/* ── 3) DENNÍ RYTMUS: 24-hour bar visualization ─────────── */
.aq-rhythm {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
  border: 1px solid rgba(15, 25, 51, 0.05);
  border-radius: 18px;
  padding: 24px 26px 22px;
  margin: 18px 0;
  box-shadow: 0 1px 3px rgba(15, 25, 51, 0.04), 0 4px 16px rgba(15, 25, 51, 0.03);
}
.aq-rhythm__bars {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 5px;
  height: 160px;
  align-items: end;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--hn-line-soft, #ECEEF4);
  position: relative;
}
.aq-rhythm__bar-wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  position: relative;
  cursor: help;
}
.aq-rhythm__bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  transition: opacity .2s ease, transform .2s ease;
  min-height: 6px;
  position: relative;
  /* Soft gradient inside the solid color — subtle 3D effect */
  background-image: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0));
}
.aq-rhythm__bar-wrap:hover .aq-rhythm__bar { transform: scaleY(1.05); transform-origin: bottom; }
.aq-rhythm__bar-wrap:hover .aq-rhythm__bar::after {
  content: attr(data-val);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 25, 51, 0.92);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  margin-bottom: 4px;
  pointer-events: none;
}
.aq-rhythm__hour {
  position: absolute;
  bottom: -20px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--hn-ink-muted, #6B7390);
  font-feature-settings: 'tnum';
}
.aq-rhythm__hour.is-major { font-weight: 600; color: var(--hn-ink-soft, #4A5260); }
.aq-rhythm__summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
  padding-top: 14px;
}
.aq-rhythm__stat { display: flex; flex-direction: column; gap: 2px; }
.aq-rhythm__stat .k {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hn-ink-muted, #6B7390);
}
.aq-rhythm__stat .v { font-size: 14px; color: var(--hn-ink-soft, #4A5260); font-feature-settings: 'tnum'; }
.aq-rhythm__stat .v strong {
  font-size: 18px;
  font-weight: 500;
  color: var(--hn-ink, #0F1933);
  letter-spacing: -0.2px;
  margin-right: 4px;
}
.aq-rhythm__stat--best .v strong  { color: #2EAD6F; }
.aq-rhythm__stat--worst .v strong { color: #C03030; }

/* ── 4) TÝDENNÍ PROFIL ─────────── */
.aq-weekday {
  background: #FFFEFA;
  border: 1px solid var(--hn-line, #E9E4DA);
  border-radius: 14px;
  padding: 22px 24px 18px;
  margin: 14px 0;
}
.aq-weekday__bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 18px; align-items: end; }
.aq-weekday__col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.aq-weekday__bar-wrap {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 8px;
}
.aq-weekday__bar { width: 100%; max-width: 60px; border-radius: 4px 4px 0 0; transition: opacity .15s ease; min-height: 6px; }
.aq-weekday__col:hover .aq-weekday__bar { opacity: 0.7; }
.aq-weekday__name { font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 600; color: var(--hn-ink-soft, #4A5260); }
.aq-weekday__col.is-weekend .aq-weekday__name { color: var(--hn-ink-muted, #6B7390); font-style: italic; }
.aq-weekday__val { font-size: 11px; color: var(--hn-ink-muted, #6B7390); font-feature-settings: 'tnum'; }
.aq-weekday__verdict {
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--hn-ink-soft, #4A5260);
}
.aq-weekday__verdict[data-tone="good"]    { background: rgba(46,173,111,0.08); border-left: 3px solid #2EAD6F; }
.aq-weekday__verdict[data-tone="warn"]    { background: rgba(232,116,74,0.08); border-left: 3px solid #E8744A; }
.aq-weekday__verdict[data-tone="neutral"] { background: rgba(15,25,51,0.04);   border-left: 3px solid var(--hn-ink-muted, #6B7390); }
.aq-weekday__verdict strong { color: var(--hn-ink, #0F1933); font-feature-settings: 'tnum'; }

/* ── 5) WHO COMPLIANCE ─────────── */
.aq-compliance {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
  border: 1px solid rgba(15, 25, 51, 0.05);
  border-radius: 18px;
  padding: 26px 28px;
  margin: 18px 0;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 28px;
  align-items: center;
  box-shadow: 0 1px 3px rgba(15, 25, 51, 0.04), 0 4px 16px rgba(15, 25, 51, 0.03);
  overflow: hidden;
}
.aq-compliance::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-from, #B6C432), var(--c-to, #2EAD6F));
}
.aq-compliance[data-tone="good"] { --c-from: #B6C432; --c-to: #2EAD6F; }
.aq-compliance[data-tone="ok"]   { --c-from: #E8B14A; --c-to: #B6C432; }
.aq-compliance[data-tone="warn"] { --c-from: #C03030; --c-to: #E8744A; }
.aq-compliance__main { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.aq-compliance__pct {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 76px;
  font-weight: 200;
  letter-spacing: -3px;
  line-height: 0.95;
  color: var(--hn-ink, #0F1933);
  font-feature-settings: 'tnum';
}
.aq-compliance[data-tone="good"] .aq-compliance__pct { color: #2EAD6F; }
.aq-compliance[data-tone="ok"]   .aq-compliance__pct { color: #5A7E2E; }
.aq-compliance[data-tone="warn"] .aq-compliance__pct { color: #B84E2A; }
.aq-compliance__pct span { font-size: 32px; font-weight: 300; color: var(--hn-ink-muted, #6B7390); margin-left: 4px; letter-spacing: -1px; }
.aq-compliance__lbl { font-size: 13px; color: var(--hn-ink-soft, #4A5260); max-width: 220px; line-height: 1.4; }

.aq-compliance__right { display: flex; flex-direction: column; gap: 14px; }
.aq-compliance__bar {
  position: relative;
  height: 14px;
  background: rgba(15,25,51,0.05);
  border-radius: 7px;
  overflow: hidden;
}
.aq-compliance__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #B6C432 0%, #2EAD6F 100%);
  border-radius: 7px;
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
  position: relative;
}
.aq-compliance__bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0));
  border-radius: 7px;
}
.aq-compliance[data-tone="warn"] .aq-compliance__bar-fill {
  background: linear-gradient(90deg, #E8B14A 0%, #E8744A 100%);
}
.aq-compliance__counts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-size: 13px; color: var(--hn-ink-soft, #4A5260); }
.aq-compliance__count {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(15, 25, 51, 0.025);
  border-radius: 12px;
}
.aq-compliance__count .dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.aq-compliance__count--ok .dot   { background: linear-gradient(135deg, #2EAD6F, #1F7849); box-shadow: 0 0 0 3px rgba(46,173,111,0.15); }
.aq-compliance__count--over .dot { background: linear-gradient(135deg, #E8744A, #C03030); box-shadow: 0 0 0 3px rgba(232,116,74,0.15); }
.aq-compliance__count strong {
  display: block;
  color: var(--hn-ink, #0F1933);
  font-size: 18px;
  font-weight: 500;
  font-feature-settings: 'tnum';
  line-height: 1.1;
}
.aq-compliance__count span:last-child {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 11.5px;
  color: var(--hn-ink-muted, #6B7390);
}

/* ── 6) TOP 10 toggle tabs ─────────── */
.aq-toplist-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(15,25,51,0.05);
  border-radius: 999px;
}
.aq-toplist-tab {
  padding: 7px 16px;
  border: none;
  background: transparent;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--hn-ink-muted, #6B7390);
  cursor: pointer;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
  letter-spacing: 0.01em;
}
.aq-toplist-tab:hover { color: var(--hn-ink-soft, #4A5260); }
.aq-toplist-tab.is-active {
  background: #FFFFFF;
  color: var(--hn-ink, #0F1933);
  box-shadow: 0 2px 8px rgba(15,25,51,0.08), 0 0 0 1px rgba(15,25,51,0.04);
}

/* Moderní table look — card-like rows */
.aq-top10-table[hidden] { display: none; }
.aq-top10-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.aq-top10-table thead th {
  background: transparent;
  padding: 14px 20px 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--hn-ink-muted, #6B7390);
  text-align: left;
  border-bottom: 1px solid rgba(15, 25, 51, 0.06);
}
.aq-top10-table thead th.num { text-align: right; }
.aq-top10-table tbody td {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(15, 25, 51, 0.04);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  color: var(--hn-ink-soft, #4A5260);
  transition: background .15s ease;
}
.aq-top10-table tbody tr:hover td { background: rgba(46, 91, 158, 0.025); }
.aq-top10-table tbody tr:last-child td { border-bottom: 0; }
.aq-top10-table td.rank {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  color: var(--hn-ink-muted, #6B7390);
  font-feature-settings: 'tnum';
  width: 48px;
}
.aq-top10-table tbody tr:first-child .rank {
  color: var(--hn-ink, #0F1933);
  font-weight: 700;
}
.aq-top10-table td strong {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  color: var(--hn-ink, #0F1933);
  font-feature-settings: 'tnum';
}
.aq-top10-table td.num {
  text-align: right;
  font-feature-settings: 'tnum';
}
.aq-top10-table td.num strong {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.2px;
}
.aq-cat-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Wrapper kolem tabulky — modernizovaná card s gradient stripe */
.aq-top10-wrap {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
  border: 1px solid rgba(15, 25, 51, 0.05);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 25, 51, 0.04), 0 4px 16px rgba(15, 25, 51, 0.03);
  margin: 18px 0;
}
.aq-top10-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2EAD6F 0%, #E8B14A 50%, #C03030 100%);
}

/* ============================================================
   SENZORY PANEL — moderní redesign (květen 2026)
   Půda + list. 6 modulů: Rekordy / Hloubkový profil / Sezónní rytmus /
   Vegetační období / Sucho / Vlhkost listu
   ============================================================ */

/* ── REKORDY: 4 karty (teplá/studená půda, sušší/mokřejší den) ─────── */
.sens-records {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 18px 0;
}
@media (min-width: 1100px) {
  .sens-records { grid-template-columns: repeat(4, 1fr); }
}
.sens-record {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(15, 25, 51, 0.05);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(15, 25, 51, 0.04), 0 4px 16px rgba(15, 25, 51, 0.03);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
.sens-record::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--g1, #2EAD6F), var(--g2, #B6C432));
}
.sens-record:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(15, 25, 51, 0.05), 0 12px 32px rgba(15, 25, 51, 0.08);
}
.sens-record--best { --g1: #E8744A; --g2: #C03030; }
.sens-record--cold { --g1: #4FA8E6; --g2: #2E5B9E; }
.sens-record--dry  { --g1: #E8B14A; --g2: #8F5C1E; }
.sens-record--wet  { --g1: #4FA8E6; --g2: #2EAD6F; }
.sens-record__badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(255,255,255,0.5), rgba(255,255,255,0));
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.sens-record__badge svg { width: 22px; height: 22px; }
.sens-record:hover .sens-record__badge { transform: rotate(-4deg) scale(1.08); }
.sens-record--best .sens-record__badge { background: linear-gradient(135deg, rgba(232,116,74,0.18), rgba(192,48,48,0.06)); color: #8F3C1E; }
.sens-record--cold .sens-record__badge { background: linear-gradient(135deg, rgba(79,168,230,0.18), rgba(46,91,158,0.06));   color: #2E5B9E; }
.sens-record--dry  .sens-record__badge { background: linear-gradient(135deg, rgba(232,177,74,0.18), rgba(143,92,30,0.06));   color: #8F5C1E; }
.sens-record--wet  .sens-record__badge { background: linear-gradient(135deg, rgba(79,168,230,0.18), rgba(46,173,111,0.06));  color: #2E5B9E; }
.sens-record__body { display: flex; flex-direction: column; gap: 4px; }
.sens-record__title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--hn-ink-muted, #6B7390);
}
.sens-record__sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  color: var(--hn-ink-soft, #4A5260);
  margin-top: -2px;
}
.sens-record__value { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
.sens-record__num {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 34px;
  font-weight: 200;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--hn-ink, #0F1933);
  font-feature-settings: 'tnum';
}
.sens-record--best .sens-record__num { color: #8F3C1E; }
.sens-record--cold .sens-record__num { color: #2E5B9E; }
.sens-record--dry  .sens-record__num { color: #8F5C1E; }
.sens-record--wet  .sens-record__num { color: #2E5B9E; }
.sens-record__unit { font-size: 13px; color: var(--hn-ink-muted, #6B7390); font-weight: 500; }
.sens-record__date {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--hn-ink-muted, #6B7390);
  letter-spacing: -0.1px;
  font-feature-settings: 'tnum';
  margin-top: 4px;
}

/* ── HLOUBKOVÝ PROFIL: 3 sloupce 20/30/50 cm ─────── */
.sens-depth {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 18px 0;
}
.sens-depth__item {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
  border: 1px solid rgba(15, 25, 51, 0.05);
  border-radius: 18px;
  padding: 22px 24px;
  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;
  gap: 10px;
}
.sens-depth__head { display: flex; flex-direction: column; gap: 2px; }
.sens-depth__cm {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 200;
  letter-spacing: -0.5px;
  color: var(--hn-ink, #0F1933);
  font-feature-settings: 'tnum';
}
.sens-depth__cm small { font-size: 12px; color: var(--hn-ink-muted, #6B7390); margin-left: 3px; letter-spacing: 0; font-weight: 400; }
.sens-depth__label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--hn-ink-muted, #6B7390);
}
.sens-depth__value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 14px 0 6px;
  border-top: 1px solid rgba(15, 25, 51, 0.05);
}
.sens-depth__num {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 44px;
  font-weight: 200;
  letter-spacing: -1.5px;
  line-height: 1;
  color: var(--c, var(--hn-ink, #0F1933));
  font-feature-settings: 'tnum';
}
.sens-depth__unit { font-size: 16px; color: var(--hn-ink-muted, #6B7390); font-weight: 400; }
.sens-depth__desc { font-size: 12px; color: var(--hn-ink-soft, #4A5260); line-height: 1.4; }

/* ── AKTUÁLNÍ STAV: sjednocený panel pro hloubky + vlhkost půdy + list ───── */
.sens-now {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
  border: 1px solid rgba(15, 25, 51, 0.05);
  border-radius: 22px;
  padding: 24px 26px 26px;
  margin: 18px 0;
  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;
  gap: 28px;
}
.sens-now__profile-title,
.sens-now__scale-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--hn-ink-muted, #6B7390);
  display: block;
  margin-bottom: 12px;
}
.sens-now__profile-title small,
.sens-now__scale-title small {
  font-size: 10.5px;
  letter-spacing: 0.10em;
  color: var(--hn-ink-faint, #8B92A8);
  margin-left: 4px;
}
.sens-now__profile .sens-depth {
  margin: 0;
}
.sens-now__scales {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  padding-top: 22px;
  border-top: 1px dashed rgba(15, 25, 51, 0.08);
}
@media (max-width: 800px) {
  .sens-now__scales { grid-template-columns: 1fr; gap: 22px; }
}
.sens-now__scale {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sens-now__scale-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.sens-now__scale-head .sens-now__scale-title { margin-bottom: 0; }
.sens-now__scale-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.1px;
}
.sens-now__scale-row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.sens-now__scale-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 92px;
}
.sens-now__scale-num {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 44px;
  font-weight: 200;
  letter-spacing: -1.5px;
  line-height: 1;
  font-feature-settings: 'tnum';
}
.sens-now__scale-unit { font-size: 14px; color: var(--hn-ink-muted, #6B7390); font-weight: 400; }
.sens-now__scale-track {
  flex: 1;
  position: relative;
  height: 8px;
  border-radius: 4px;
  overflow: visible;
}
.sens-now__scale-track--moisture {
  background: linear-gradient(90deg, #4FA8E6 0%, #2EAD6F 18%, #B6C432 34%, #E8B14A 58%, #C03030 100%);
}
.sens-now__scale-track--leaf {
  background: linear-gradient(90deg, #E8B14A 0%, #B6C432 22%, #4FA8E6 60%, #2E5B9E 100%);
}
.sens-now__scale-marker {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid #FFFFFF;
  box-shadow: 0 1px 4px rgba(15, 25, 51, 0.22), 0 0 0 1px rgba(15, 25, 51, 0.08);
}
.sens-now__scale-ends {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--hn-ink-muted, #6B7390);
  letter-spacing: -0.1px;
}
.sens-now__scale-ends strong {
  color: var(--hn-ink-soft, #4A5260);
  font-weight: 600;
}
.sens-now__scale-hint {
  font-size: 12px;
  color: var(--hn-ink-soft, #4A5260);
  line-height: 1.45;
  margin: 4px 0 0;
  font-style: italic;
}

/* ── SEZÓNNÍ RYTMUS: 12-month bars ─────── */
.sens-clim {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
  border: 1px solid rgba(15, 25, 51, 0.05);
  border-radius: 18px;
  padding: 24px 26px 20px;
  margin: 18px 0;
  box-shadow: 0 1px 3px rgba(15, 25, 51, 0.04), 0 4px 16px rgba(15, 25, 51, 0.03);
}
.sens-clim__bars {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  align-items: end;
}
.sens-clim__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.sens-clim__bar-wrap {
  width: 100%;
  height: 110px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 4px;
}
.sens-clim__bar {
  width: 100%;
  max-width: 38px;
  border-radius: 4px 4px 0 0;
  min-height: 8px;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0));
  transition: transform .2s ease;
}
.sens-clim__col:hover .sens-clim__bar { transform: scaleY(1.05); transform-origin: bottom; }
.sens-clim__name { font-size: 11px; font-weight: 600; color: var(--hn-ink-soft, #4A5260); letter-spacing: 0.02em; }
.sens-clim__val { font-size: 10.5px; color: var(--hn-ink-muted, #6B7390); font-feature-settings: 'tnum'; }
.sens-clim__verdict {
  margin-top: 18px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(46, 91, 158, 0.04), rgba(232, 116, 74, 0.04));
  border-radius: 12px;
  font-size: 13px;
  color: var(--hn-ink-soft, #4A5260);
  border-left: 3px solid rgba(46, 91, 158, 0.30);
  line-height: 1.55;
}
.sens-clim__verdict strong { color: var(--hn-ink, #0F1933); font-feature-settings: 'tnum'; }

/* ── VEGETAČNÍ OBDOBÍ: tabulka ─────── */
.sens-growing {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
  border: 1px solid rgba(15, 25, 51, 0.05);
  border-radius: 18px;
  overflow: hidden;
  margin: 18px 0;
  box-shadow: 0 1px 3px rgba(15, 25, 51, 0.04), 0 4px 16px rgba(15, 25, 51, 0.03);
}
.sens-growing::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #B6C432, #2EAD6F);
}
.sens-growing__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.sens-growing__table thead th {
  background: transparent;
  padding: 14px 20px 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--hn-ink-muted, #6B7390);
  text-align: left;
  border-bottom: 1px solid rgba(15, 25, 51, 0.06);
}
.sens-growing__table thead th.num { text-align: right; }
.sens-growing__table tbody td {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(15, 25, 51, 0.04);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  color: var(--hn-ink-soft, #4A5260);
  font-feature-settings: 'tnum';
}
.sens-growing__table tbody tr:hover td { background: rgba(46, 173, 111, 0.025); }
.sens-growing__table tbody tr:last-child td { border-bottom: 0; }
.sens-growing__table td.rank { font-weight: 700; color: var(--hn-ink, #0F1933); width: 80px; }
.sens-growing__table td.num { text-align: right; }
.sens-growing__table td.num strong { font-size: 15px; font-weight: 600; color: var(--hn-ink, #0F1933); }
.sens-growing__threshold {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  margin-left: 4px;
  letter-spacing: 0.02em;
}
.sens-growing__threshold--five { background: rgba(182, 196, 50, 0.18); color: #6A8021; }
.sens-growing__threshold--ten  { background: rgba(232, 116, 74, 0.18); color: #8F3C1E; }
/* Aktuální (běžící) rok — odlišný řádek + "probíhá" badge */
.sens-growing__row--current td { background: rgba(46, 173, 111, 0.04); }
.sens-growing__row--current:hover td { background: rgba(46, 173, 111, 0.07) !important; }
.sens-growing__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  margin-left: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(46, 173, 111, 0.18);
  color: #1F7A4D;
}
.sens-growing__pending {
  font-style: italic;
  font-size: 12px;
  font-weight: 400;
  color: var(--hn-ink-muted, #6B7390);
}

/* ── SUCHO A VLHKOST: gauge layout ─────── */
.sens-drought {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFAF1 100%);
  border: 1px solid rgba(15, 25, 51, 0.05);
  border-radius: 18px;
  padding: 26px 28px;
  margin: 18px 0;
  box-shadow: 0 1px 3px rgba(15, 25, 51, 0.04), 0 4px 16px rgba(15, 25, 51, 0.03);
  overflow: hidden;
}
.sens-drought::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #B6C432, #E8B14A, #C03030);
}
/* ── Stacked bar: 3 segmenty (sucho/optimum/mokro) ─────── */
.sens-drought__chart {
  display: flex;
  gap: 3px;
  height: 56px;
  margin-bottom: 22px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(15, 25, 51, 0.02);
}
.sens-drought__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: filter .15s ease, transform .15s ease;
  min-width: 0;
  cursor: default;
}
.sens-drought__seg:hover { filter: brightness(1.08); }
.sens-drought__seg--dry { background: linear-gradient(135deg, #E8B14A 0%, #C36F1E 100%); color: #4A2310; }
.sens-drought__seg--opt { background: linear-gradient(135deg, #B6C432 0%, #6F9020 100%); color: #2A3812; }
.sens-drought__seg--wet { background: linear-gradient(135deg, #4FA8E6 0%, #2E5B9E 100%); color: #FFFFFF; }
.sens-drought__seg-pct {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.2px;
  text-shadow: 0 1px 2px rgba(15, 25, 51, 0.08);
  white-space: nowrap;
}

/* ── 3 detailní karty ─────── */
.sens-drought__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 18px;
}
@media (max-width: 760px) {
  .sens-drought__cards { grid-template-columns: 1fr; }
}
.sens-drought__card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(15, 25, 51, 0.05);
  border-radius: 14px;
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sens-drought__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(15, 25, 51, 0.07);
}
.sens-drought__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.sens-drought__card--dry::before { background: linear-gradient(90deg, #E8B14A, #C36F1E); }
.sens-drought__card--opt::before { background: linear-gradient(90deg, #B6C432, #6F9020); }
.sens-drought__card--wet::before { background: linear-gradient(90deg, #4FA8E6, #2E5B9E); }
.sens-drought__icon {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
}
.sens-drought__icon svg { width: 18px; height: 18px; }
.sens-drought__card--dry .sens-drought__icon { background: rgba(232, 177, 74, 0.12); color: #8F5C1E; }
.sens-drought__card--opt .sens-drought__icon { background: rgba(182, 196, 50, 0.14); color: #6A8021; }
.sens-drought__card--wet .sens-drought__icon { background: rgba(79, 168, 230, 0.12); color: #2E5B9E; }
.sens-drought__title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--hn-ink-muted, #6B7390);
  padding-right: 36px;
}
.sens-drought__card--dry .sens-drought__title { color: #8F5C1E; }
.sens-drought__card--opt .sens-drought__title { color: #6A8021; }
.sens-drought__card--wet .sens-drought__title { color: #2E5B9E; }
.sens-drought__sub {
  font-size: 11px;
  color: var(--hn-ink-muted, #6B7390);
  margin-bottom: 10px;
}
.sens-drought__big {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 36px;
  font-weight: 200;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--hn-ink, #0F1933);
  font-feature-settings: 'tnum';
  display: inline-block;
}
.sens-drought__unit {
  display: inline-block;
  font-size: 14px;
  color: var(--hn-ink-muted, #6B7390);
  margin-left: 6px;
}
.sens-drought__note {
  font-size: 12px;
  color: var(--hn-ink-soft, #4A5260);
  margin-top: 6px;
  line-height: 1.4;
  font-style: italic;
}

/* ── Spodní řádek "Celkem X dnů s měřením" ─────── */
.sens-drought__total {
  font-size: 12px;
  color: var(--hn-ink-muted, #6B7390);
  text-align: center;
  border-top: 1px dashed rgba(15, 25, 51, 0.08);
  padding-top: 12px;
  line-height: 1.55;
  max-width: 78ch;
  margin: 0 auto;
}
.sens-drought__total strong {
  color: var(--hn-ink, #0F1933);
  font-weight: 600;
  font-feature-settings: 'tnum';
}
.sens-drought__context {
  display: block;
  margin-top: 4px;
  font-style: italic;
  color: var(--hn-ink-muted, #6B7390);
}

/* ── VLHKOST LISTU: 3 karty ─────── */
.sens-leaf__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 18px 0;
}
.sens-leaf__card {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
  border: 1px solid rgba(15, 25, 51, 0.05);
  border-radius: 18px;
  padding: 22px 24px;
  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;
  gap: 6px;
  overflow: hidden;
}
.sens-leaf__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #4FA8E6, #2EAD6F);
}
.sens-leaf__card--risk::before  { background: linear-gradient(90deg, #E8B14A, #C03030); }
.sens-leaf__card--streak::before { background: linear-gradient(90deg, #2E5B9E, #4FA8E6); }
.sens-leaf__pct {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 44px;
  font-weight: 200;
  letter-spacing: -1.5px;
  line-height: 1;
  color: var(--hn-ink, #0F1933);
  font-feature-settings: 'tnum';
}
.sens-leaf__pct span { font-size: 22px; color: var(--hn-ink-muted, #6B7390); margin-left: 2px; }
.sens-leaf__card--wet  .sens-leaf__pct { color: #2E5B9E; }
.sens-leaf__card--risk .sens-leaf__pct { color: #8F3C1E; }
.sens-leaf__card--streak .sens-leaf__pct { color: #2E5B9E; }
.sens-leaf__lbl {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: var(--hn-ink-soft, #4A5260);
  line-height: 1.4;
  margin-top: 2px;
}
.sens-leaf__detail {
  font-size: 11.5px;
  color: var(--hn-ink-muted, #6B7390);
  margin-top: 4px;
}

/* ── Responsive ─────── */
@media (max-width: 720px) {
  .sens-records { grid-template-columns: 1fr; }
  .sens-depth { grid-template-columns: 1fr; }
  .sens-depth__num { font-size: 36px; }
  .sens-clim__bars { gap: 4px; }
  .sens-clim__bar-wrap { height: 70px; padding: 0 2px; }
  .sens-clim__name { font-size: 9px; }
  .sens-clim__val { font-size: 9px; }
  .sens-drought__main { grid-template-columns: 1fr; }
  .sens-drought__pct { font-size: 48px; }
  .sens-drought__counts { grid-template-columns: 1fr; }
  .sens-leaf__grid { grid-template-columns: 1fr; }
  .sens-growing__table { font-size: 12px; }
  .sens-growing__table th, .sens-growing__table td { padding: 10px 12px; }
}

/* ── 7) SLOŽENÍ PRACHU ─────────── */
.aq-composition {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
  border: 1px solid rgba(15, 25, 51, 0.05);
  border-radius: 18px;
  padding: 26px 28px;
  margin: 18px 0;
  box-shadow: 0 1px 3px rgba(15, 25, 51, 0.04), 0 4px 16px rgba(15, 25, 51, 0.03);
  overflow: hidden;
}
.aq-composition::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1E4275 0%, #3A6CB0 42%, #B6C432 100%);
}
.aq-composition__stack {
  display: flex;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}
.aq-composition__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease;
  position: relative;
  font-family: 'Inter', system-ui, sans-serif;
}
.aq-composition__seg:hover { transform: scaleY(1.08); }
.aq-composition__seg--fine {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 40%),
    linear-gradient(90deg, #2E5B9E 0%, #3A6CB0 100%);
}
.aq-composition__seg--coarse {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 40%),
    linear-gradient(90deg, #B6C432 0%, #C8D544 100%);
}
.aq-composition__seg--pm1 {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 40%),
    linear-gradient(90deg, #1E4275 0%, #2C5590 100%);
}
.aq-composition__seg--mid {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0) 40%),
    linear-gradient(90deg, #3A6CB0 0%, #5184C2 100%);
}
.aq-composition__seg-pct {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  font-feature-settings: 'tnum';
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
.aq-composition__legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.aq-composition__item {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  background: rgba(15, 25, 51, 0.025);
  border-radius: 12px;
}
.aq-composition__dot { width: 16px; height: 16px; border-radius: 5px; margin-top: 2px; }
.aq-composition__dot--fine   { background: linear-gradient(135deg, #2E5B9E, #1E4275); box-shadow: 0 0 0 3px rgba(46,91,158,0.10); }
.aq-composition__dot--coarse { background: linear-gradient(135deg, #B6C432, #8FA021); box-shadow: 0 0 0 3px rgba(182,196,50,0.10); }
.aq-composition__dot--pm1    { background: linear-gradient(135deg, #2C5590, #14305A); box-shadow: 0 0 0 3px rgba(30,66,117,0.10); }
.aq-composition__dot--mid    { background: linear-gradient(135deg, #5184C2, #2E5B9E); box-shadow: 0 0 0 3px rgba(58,108,176,0.10); }
.aq-composition__item strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hn-ink, #0F1933);
  display: block;
  letter-spacing: -0.1px;
}
.aq-composition__item small {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--hn-ink-muted, #6B7390);
  line-height: 1.5;
}
.aq-composition__hint {
  margin: 16px 0 0;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(46, 91, 158, 0.04), rgba(182, 196, 50, 0.04));
  border-radius: 10px;
  font-size: 12.5px;
  font-style: italic;
  color: var(--hn-ink-soft, #4A5260);
  border-left: 3px solid rgba(46, 91, 158, 0.30);
}

/* Responsive — pod 720 px */
@media (max-width: 720px) {
  .aq-records { grid-template-columns: 1fr; gap: 12px; }
  .aq-record { padding: 14px 16px; grid-template-columns: 48px 1fr; gap: 12px; }
  .aq-record__badge { width: 48px; height: 48px; font-size: 24px; }
  .aq-record__num { font-size: 26px; }
  .aq-rhythm__bars { gap: 2px; height: 110px; }
  .aq-rhythm__hour { font-size: 9px; }
  .aq-rhythm__summary { grid-template-columns: 1fr; gap: 10px; }
  .aq-weekday__bars { gap: 8px; }
  .aq-weekday__bar-wrap { height: 60px; padding: 0 3px; }
  .aq-compliance__pct { font-size: 44px; }
  .aq-composition__legend { grid-template-columns: 1fr; }
}