/*
  DiviMetrics — Fluid foundation
  ==============================
  Viewport-aware density (clamp typography + spacing). No global zoom/scale.
  Load immediately after _variables.css.
*/

html {
  font-size: clamp(14px, 13px + 0.14vw, 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:root {
  /* ── Fluid spacing (1080p → 4K, bounded) ── */
  --space-1: clamp(3px, 0.15vw + 2px, 4px);
  --space-2: clamp(6px, 0.25vw + 4px, 8px);
  --space-3: clamp(8px, 0.35vw + 6px, 12px);
  --space-4: clamp(12px, 0.45vw + 8px, 16px);
  --space-5: clamp(14px, 0.55vw + 10px, 20px);
  --space-6: clamp(18px, 0.7vw + 12px, 24px);
  --space-8: clamp(22px, 0.9vw + 16px, 32px);
  --space-10: clamp(24px, 1.2vw + 16px, 40px);
  --space-12: clamp(28px, 1.4vw + 20px, 48px);
  --space-16: clamp(32px, 1.6vw + 24px, 56px);
  --space-20: clamp(40px, 2vw + 28px, 72px);
  --space-24: clamp(48px, 2.4vw + 32px, 88px);

  /* Semantic rhythm — use in reports & dense UI */
  --section-gap: clamp(16px, 1.1vw + 10px, 28px);
  --section-pad: clamp(12px, 0.9vw + 8px, 20px);
  --stack-gap: clamp(8px, 0.55vw + 6px, 16px);
  --inline-gap: clamp(8px, 0.45vw + 6px, 12px);

  /* Fluid type scale (rem still scales with html font-size) */
  --fs-xs: clamp(0.65rem, 0.62rem + 0.08vw, 0.7rem);
  --fs-sm: clamp(0.78rem, 0.74rem + 0.12vw, 0.85rem);
  --fs-base: clamp(0.86rem, 0.82rem + 0.14vw, 0.92rem);
  --fs-md: clamp(0.92rem, 0.88rem + 0.16vw, 0.98rem);
  --fs-lg: clamp(0.94rem, 0.9rem + 0.18vw, 1rem);
  --fs-xl: clamp(1.05rem, 1rem + 0.22vw, 1.15rem);
  --fs-2xl: clamp(1.2rem, 1.1rem + 0.35vw, 1.35rem);
  --fs-3xl: clamp(1.45rem, 1.3rem + 0.5vw, 1.7rem);

  --lh-normal: 1.45;
  --lh-relaxed: 1.55;

  /* Layout widths */
  --sidebar-width: clamp(168px, 11vw, 200px);
  --report-rail-width: clamp(168px, 11vw, 200px);
  --report-content-max: min(100%, 1080px);
  --report-layout-max: min(100%, calc(var(--report-rail-width) + var(--space-6) + var(--report-content-max)));
  --report-gutter-inline: clamp(24px, 4vw, 72px);
  --right-panel-width: clamp(220px, 16vw, 280px);
  --container-max: min(100%, clamp(1140px, 93vw, 1360px));
  --content-read-max: min(100%, 1080px);

  --table-cell-padding-y: clamp(4px, 0.2vw + 3px, 6px);
  --panel-padding: clamp(10px, 0.6vw + 8px, 14px) clamp(12px, 0.8vw + 10px, 18px);
  --panel-gap: clamp(8px, 0.5vw + 6px, 12px);
}

/* Typical desktop (1080p–1440p): slightly tighter vertical rhythm */
@media (min-width: 900px) and (max-width: 1919px) {
  :root {
    --section-gap: clamp(14px, 0.9vw + 8px, 22px);
    --section-pad: clamp(10px, 0.7vw + 6px, 16px);
    --stack-gap: clamp(7px, 0.45vw + 5px, 12px);
  }
}

/* Ultra-wide / 4K — cap growth */
@media (min-width: 2200px) {
  :root {
    --section-gap: 26px;
    --section-pad: 18px;
    --stack-gap: 14px;
  }
}

/* Report — więcej pionowego oddechu, węższa kolumna treści */
body.report-open {
  --section-gap: clamp(22px, 1.35vw + 14px, 38px);
  --section-pad: clamp(14px, 0.95vw + 10px, 22px);
  --stack-gap: clamp(10px, 0.6vw + 8px, 18px);
}

/* Report rail: one page scroll — no nested scrollbar on desktop */
@media (min-width: 900px) {
  .report-rail,
  .report-nav {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-x: hidden;
  }
}