/* Vzhled jednotlivých částí stránky. Barvy a rozměry jsou v theme.css. */
  .dz { display: grid; gap: var(--gap-lg); max-width: 1320px; margin-inline: auto; font-family: var(--font-body); }
  .dz b { font-weight: 600; }
  .dz-note { font-size: var(--font-size-caption); color: var(--color-fg-muted); line-height: 1.45; }
  .dz-card p, .dz-hero p { margin: 0; }

  /* hero: title, takeaway, four figures with trend lines */
  .dz-hero { display: grid; gap: var(--gap-md); }
  .dz-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--font-size-caption); color: var(--color-fg-muted); letter-spacing: .06em; text-transform: uppercase; }
  .dz-shield { display: inline-flex; align-items: center; justify-content: center; min-width: 2.1em; padding: 1px 6px; border-radius: 4px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #fff; font-size: 11px; }
  .dz-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: calc(var(--font-size-title) * 1.6); line-height: 1.08; text-wrap: balance; }
  .dz-lede { max-width: 66ch; color: var(--color-fg-muted); font-size: var(--font-size-body); line-height: 1.55; }
  .dz-lede b { color: var(--color-fg); font-variant-numeric: tabular-nums; }
  .dz-road { height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--chart-axis) 0 28px, transparent 28px 46px); opacity: .55; }

  .dz-kpis { display: grid; gap: var(--gap-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
  .dz-kpi { display: grid; gap: 4px; align-content: start; padding: var(--pad-lg); background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--radius); min-width: 0; }
  .dz-kpi-label { font-size: var(--font-size-caption); color: var(--color-fg-muted); }
  .dz-kpi-value { font-family: var(--font-display); font-weight: 400; font-size: calc(var(--font-size-title) * 1.3); line-height: 1.1; font-variant-numeric: tabular-nums; }
  .dz-kpi-foot { font-size: var(--font-size-caption); color: var(--color-fg-muted); font-variant-numeric: tabular-nums; }
  .dz-spark { position: relative; height: 44px; margin-top: 4px; }
  .dz-delta { font-weight: 600; }
  .dz-delta.good { color: var(--color-ok); }
  .dz-delta.bad { color: var(--color-bad); }

  /* sticky period bar with the timeline */
  .dz-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: grid; gap: var(--gap-sm); padding: var(--pad-sm) var(--pad-md); background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--radius); box-shadow: var(--shadow-popover); }
  .dz-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-sm); justify-content: space-between; }
  .dz-bar-row > div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-xs); }
  .dz-nav { position: relative; height: 64px; }
  .dz-nav .selection { fill: var(--color-fg); fill-opacity: .08; stroke: var(--color-fg); stroke-opacity: .5; }
  .dz-nav .handle { fill: var(--color-fg); fill-opacity: .55; rx: 2; }
  .dz-period { font-weight: 600; font-variant-numeric: tabular-nums; }

  .dz-btn, .dz-sel, .dz-input { font: inherit; font-size: var(--font-size-caption); color: var(--color-fg); background: var(--color-bg); border: 1px solid var(--color-border-line); border-radius: var(--radius); padding: 5px 10px; }
  .dz-btn { cursor: pointer; }
  .dz-btn:hover:not(:disabled) { border-color: var(--color-fg-muted); }
  .dz-btn:disabled { opacity: .4; cursor: default; }
  .dz-btn[aria-pressed="true"], .dz-btn[aria-selected="true"] { background: var(--color-fg); color: var(--color-bg); border-color: var(--color-fg); }
  .dz-btn:focus-visible, .dz-sel:focus-visible, .dz-input:focus-visible, .dz-tab:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 2px; }
  .dz-sel { cursor: pointer; max-width: 15rem; }
  .dz-input { min-width: 0; width: 12rem; }
  .dz-group { display: inline-flex; gap: 0; }
  .dz-group .dz-btn { border-radius: 0; margin-left: -1px; }
  .dz-group .dz-btn:first-child { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; }
  .dz-group .dz-btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }

  /* tabs */
  .dz-tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--color-border-line); scrollbar-width: none; }
  .dz-tab { font: inherit; font-size: var(--font-size-body); background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; color: var(--color-fg-muted); cursor: pointer; white-space: nowrap; }
  .dz-tab:hover { color: var(--color-fg); }
  .dz-tab[aria-selected="true"] { color: var(--color-fg); border-bottom-color: var(--color-fg); font-weight: 600; }
  .dz-panel { display: grid; gap: var(--gap-md); }

  .dz-filters { display: flex; flex-wrap: wrap; gap: var(--gap-sm) var(--gap-lg); align-items: center; padding: var(--pad-sm) var(--pad-md); border: 1px dashed var(--color-border-line); border-radius: var(--radius); }
  .dz-filters > div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-xs); }
  .dz-flabel { font-size: var(--font-size-caption); color: var(--color-fg-muted); margin-right: 2px; }

  .dz-grid { display: grid; gap: var(--gap-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
  .dz-grid3 { display: grid; gap: var(--gap-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
  .dz-wide { display: grid; gap: var(--gap-md); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  @media (max-width: 860px) { .dz-wide { grid-template-columns: minmax(0, 1fr); } }
  .dz-card { min-width: 0; display: grid; gap: var(--gap-sm); align-content: start; padding: var(--pad-lg); background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--radius); }
  .dz-card-head { display: flex; flex-wrap: wrap; gap: var(--gap-sm); align-items: flex-start; justify-content: space-between; }
  .dz-card-head > div:first-child { min-width: 0; flex: 1 1 14rem; }
  .dz-card h3 { margin: 0; font-size: var(--font-size-heading); font-weight: var(--font-weight-medium); }
  .dz-legend { display: flex; flex-wrap: wrap; gap: 4px 6px; }
  .dz-leg { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--font-size-caption); color: var(--color-fg); background: none; border: 1px solid transparent; border-radius: 999px; padding: 2px 8px 2px 6px; cursor: pointer; }
  .dz-leg:hover { border-color: var(--color-border-line); }
  .dz-leg[aria-pressed="false"] { color: var(--color-fg-muted); text-decoration: line-through; }
  .dz-leg[aria-pressed="false"] .dz-sw { opacity: .25; }
  .dz-sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: none; }

  .dz-chart { position: relative; min-height: 260px; }
  .dz-chart.short { min-height: 200px; }
  .dz-chart.cal { min-height: 140px; }
  .dz-chart.map { min-height: 320px; }
  .dz-chart.tiny { min-height: 150px; }
  .dz-svg { display: block; overflow: visible; }
  .dz-svg text { font-family: var(--font-body); font-size: 11px; fill: var(--color-fg-muted); }
  .dz-svg .grid { stroke: var(--chart-grid); stroke-width: 1; }
  .dz-svg .axis { stroke: var(--chart-axis); stroke-width: 1; }
  .dz-svg .hit { fill: transparent; cursor: pointer; }
  .dz-tip { position: absolute; z-index: 30; pointer-events: none; min-width: 9rem; max-width: 17rem; background: var(--surface-popover); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-popover); padding: var(--pad-xs) var(--pad-sm); font-size: var(--font-size-caption); line-height: 1.45; font-variant-numeric: tabular-nums; }
  .dz-tip-t { color: var(--text-secondary); margin-bottom: 2px; }
  .dz-tip-r { display: flex; align-items: center; gap: 6px; }
  .dz-tip-r span:nth-child(2) { flex: 1; }
  .dz-tip-r span:last-child { font-weight: 600; }

  .dz-hbars { display: grid; gap: 6px; font-size: var(--font-size-caption); font-variant-numeric: tabular-nums; }
  .dz-hbars.scroll { max-height: 30rem; overflow: auto; padding-right: 4px; }
  .dz-hrow { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr) auto; gap: var(--gap-sm); align-items: center; border-radius: 4px; padding: 2px 4px; }
  .dz-hrow.click { cursor: pointer; }
  .dz-hrow.click:hover { background: var(--chart-grid); }
  .dz-hrow.on { background: var(--chart-grid); outline: 1px solid var(--color-fg-muted); }
  .dz-hl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-fg); }
  .dz-hl small { display: block; color: var(--color-fg-muted); font-size: inherit; }
  .dz-ht { height: 10px; background: var(--chart-grid); border-radius: 2px; overflow: hidden; }
  .dz-hb { height: 100%; border-radius: 2px; }
  .dz-hv { text-align: right; color: var(--color-fg); min-width: 4.5rem; }

  .dz-stack { display: flex; height: 22px; gap: 2px; border-radius: var(--radius); overflow: hidden; }
  .dz-stack > div { height: 100%; min-width: 2px; }
  .dz-stackleg { display: grid; gap: 6px; margin-top: var(--gap-sm); font-size: var(--font-size-caption); font-variant-numeric: tabular-nums; }
  .dz-stackleg > div { display: grid; grid-template-columns: 10px 1fr auto auto; gap: var(--gap-sm); align-items: center; }
  .dz-stackleg span:last-child { color: var(--color-fg-muted); min-width: 3.5rem; text-align: right; }

  .dz-gate-name { font-family: var(--font-display); font-size: calc(var(--font-size-title) * .95); line-height: 1.2; }
  .dz-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--gap-sm); }
  .dz-fact { display: grid; gap: 2px; }
  .dz-fact span:first-child { font-size: var(--font-size-caption); color: var(--color-fg-muted); }
  .dz-fact b { font-size: var(--font-size-heading); font-variant-numeric: tabular-nums; }

  .dz-failed { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: inherit; color: var(--color-fg-muted); font-size: var(--font-size-caption); }
  .dz-failed::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: var(--color-bad); }
  .dz-about { font-size: var(--font-size-body); line-height: 1.6; max-width: 75ch; }
  .dz-about h3 { margin: var(--gap-md) 0 var(--gap-xs); font-size: var(--font-size-heading); font-weight: var(--font-weight-medium); }
  .dz-about p, .dz-about ul { margin: 0 0 var(--gap-sm); }
  @media (prefers-reduced-motion: no-preference) {
    .dz-panel:not([hidden]) { animation: dz-in var(--dur-slow) var(--ease-out); }
    @keyframes dz-in { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  }

  .dz-shield { background: var(--series-8); }
  .dz-footer { display: flex; flex-wrap: wrap; gap: var(--gap-xs) var(--gap-lg); justify-content: space-between; padding-top: var(--gap-md); border-top: 1px solid var(--color-border-line); font-size: var(--font-size-caption); color: var(--color-fg-muted); }