/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE.CSS — Mobile-First
   Strategy: base styles = mobile (max-width: 1199px), then min-width to expand up.
   Desktop styles live in main.css — this file does NOT override them.

   Breakpoints:
   --bp-sm:  480px   (large phone)
   --bp-md:  640px   (landscape / small tablet)
   --bp-lg:  900px   (tablet)
   --bp-xl:  1200px  (desktop — main layout switch)
═══════════════════════════════════════════════════════════════ */

/* ── TOPBAR ───────────────────────────────────────────────────
   All devices: burger left · logo center · icons right.
   topbar-nav always hidden (nav lives in drawer).
────────────────────────────────────────────────────────────── */
.topbar-nav { display: none; }
.burger     { display: flex; }

@media (min-width: 900px) {
  /* Desktop drawer: thin horizontal strip, links in one row */
  .nav-drawer {
    flex-direction: row; align-items: center; justify-content: center;
    bottom: auto; height: 48px;
    padding: 0 calc(var(--u) * 2.5); gap: 4px;
  }
  .nav-drawer a {
    min-height: 36px; width: auto; max-width: none;
    border-bottom: none; border-radius: var(--r);
    padding: 0 8px; justify-content: center;
  }
  .nav-drawer a:not(.nav-cta) {
    min-width: 6.5rem; text-align: center;
  }
}


/* ── WRAP / PAGE PADDING ────────────────────────────────────── */
@media (max-width: 400px) {
  .wrap { padding-left: calc(var(--u) * 2); padding-right: calc(var(--u) * 2); }
}

/* Landscape phones: avoid “boxed” feel, keep usable gutters */
@media (max-height: 520px) and (orientation: landscape) {
  .wrap { padding-left: calc(var(--u) * 2); padding-right: calc(var(--u) * 2); }
}


/* ── REPORT LAYOUT ──────────────────────────────────────────── */
/* Below desktop: single column — main + sidebar stacked */
@media (max-width: 1199px) {
  .report-wrap    { display: flex; flex-direction: column; gap: calc(var(--u) * 3); padding: calc(var(--u) * 3) 0 calc(var(--u) * 8); }
  .report-main    { min-width: 0; width: 100%; }
  /* Sidebar: same full width as main column — one card per row (matches desktop stack) */
  .report-sidebar {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 2);
  }

  /* 4C nav: vertical list (same as desktop), readable on mobile */
  .report-sidebar > .sb-card:first-child .sb-bd {
    flex-direction: column;
    overflow-x: visible;
    padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
    gap: 0;
  }
  .c4-step {
    flex-shrink: 0;
    white-space: normal;
    align-items: flex-start;
  }
  .c4-step-desc { display: block; }
}

@media (min-width: 1200px) {
  /* Desktop: report-layout grid handles main+sidebar */
  .report-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: calc(var(--u) * 4) 0 calc(var(--u) * 10);
  }
  .report-sidebar { width: 300px; flex-shrink: 0; position: sticky; top: calc(52px + var(--u) * 2); }
  .report-sidebar { display: flex; flex-direction: column; gap: calc(var(--u) * 2); }

  /* Restore 4C nav to vertical list */
  .report-sidebar > .sb-card:first-child .sb-bd {
    flex-direction: column; overflow-x: visible;
    padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
  }
  .c4-step { white-space: normal; }
  .c4-step-desc { display: block; }
}


/* ── CARD SPACING ───────────────────────────────────────────── */
@media (max-width: 1199px) {
  .report-main { display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
}

@media (min-width: 640px) {
  .report-main { gap: calc(var(--u) * 3); }
}


/* ── C02 MODULE LAYOUT ──────────────────────────────────────── */
/* Below desktop: stack everything */
@media (max-width: 1199px) {
  .c02-modules           { grid-template-columns: 1fr !important; }
  .c02-vdiv              { display: none; }
  .c02-slider-bars-inner { grid-template-columns: 1fr; }
  .c02-mod-slider-col    { padding: 0 0 calc(var(--u) * 1.5); }
  .c02-mod-bars-col      { padding: 0 0 calc(var(--u) * 1.5); }
  .c02-slider-wrap       { justify-content: flex-start; }
}

@media (min-width: 640px) and (max-width: 1199px) {
  /* Tablet: slider+bars side-by-side, spider below */
  .c02-slider-bars-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
  .c02-mod-slider-col    { padding: 0.5rem calc(var(--u) * 2) calc(var(--u) * 1.5) 0; }
  .c02-mod-bars-col      { padding: 0.5rem 0 calc(var(--u) * 1.5) calc(var(--u) * 2); }
  .report-main .c02-slider-wrap { justify-content: flex-start; }
}

@media (min-width: 1200px) {
  /* Desktop: wider slider+bars block, narrower spider (matches main.css) */
  .c02-modules           { grid-template-columns: minmax(0, 2.4fr) 1px minmax(0, 1.35fr) !important; }
  .c02-vdiv              { display: block; }
}


/* ── KPI CIRCLES ────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .kpi-section { flex-wrap: wrap; }
  .kpi-item    { flex: 0 0 calc(33.333% - 8px); min-width: 60px; }
}

@media (min-width: 640px) {
  /* Tablet+: allow up to 6 per row */
  .kpi-item { flex: 1 1 auto; }
}


/* ── INDEX TERMS GRID ───────────────────────────────────────── */
@media (max-width: 639px) {
  .terms-grid { grid-template-columns: 1fr; }
}

@media (min-width: 640px) {
  .terms-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

@media (max-width: 520px) {
  .terms-grid .card-two-col {
    grid-template-columns: 1fr;
  }
}


/* ── PRICING GRID ───────────────────────────────────────────── */
@media (max-width: 639px) {
  .grid-3.grid--top { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

@media (min-width: 640px) {
  .grid-3.grid--top { max-width: none; grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .grid-3.grid--top { grid-template-columns: 1fr 1fr 1fr; }
}


/* ── REPORT HEADER ──────────────────────────────────────────── */
@media (max-width: 1199px) {
  .report-hd   { padding: calc(var(--u) * 2) 0 calc(var(--u) * 1.5); }
  .report-term { font-size: clamp(1.75rem, 8vw, 3.5rem); }
  .hd-meta     { flex-wrap: wrap; gap: 6px; }
}

@media (min-width: 640px) {
  .report-hd { padding: calc(var(--u) * 3) 0 calc(var(--u) * 2); }
}


/* ── FOOTER ─────────────────────────────────────────────────── */
@media (max-width: 899px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 3); }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: calc(var(--u) * 4); }
  .footer-grid > div:first-child { grid-column: auto; }
}


/* ── TOUCH TARGETS (all interactive elements ≥44px on mobile) ── */
@media (max-width: 899px) {
  .btn, .btn-primary, .btn-secondary, .btn-ghost { min-height: 44px; }
  .card-cta  { min-height: 48px; }
  .nav-drawer a { min-height: 48px; }
  .card-ctx-item { min-height: 48px; }
}


/* ── Tooltips: overflow handled by white-space:normal + max-width on ::before ── */


/* ── UTILITY: hide/show per breakpoint ──────────────────────── */
.hide-mobile { display: none; }
@media (min-width: 640px) { .hide-mobile { display: initial; } }

.show-mobile { display: initial; }
@media (min-width: 640px) { .show-mobile { display: none; } }


/* ═══════════════════════════════════════════════════════════════
   REPORT PAGE — Mobile layout overrides (≤700px)
   Applies to preview.html / report.html card layout
═══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {

  /* ── C01 Identity Briefing: KPI circles → 2-row layout ──────
     Row 1: Origin · Domain Focus · Authority Level (centred)
     Horizontal rule
     Row 2: DIV · DEF (centred, same circle size & spacing)
  ────────────────────────────────────────────────────────────── */
  .kpi-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-top: 0.5rem;
    width: 100%;
    box-sizing: border-box;
  }
  .kpi-g1,
  .kpi-g2 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    padding: 0;
    gap: 10px;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Fixed circle size — row of 3 + row of 2, visually even */
  .kpi-item {
    flex: 0 0 auto;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
  }
  .kpi-badge {
    width: 100px;
    height: 100px;
    max-width: 100px;
    aspect-ratio: 1;
  }
  .kpi-g2 {
    justify-content: center;
    gap: 12px;
    padding-top: 4px;
  }
  /* Vertical divider → horizontal rule (full card width; rows above/below stay centered) */
  .kpi-col-empty {
    display: block;
    position: static;
    width: 100%;
    max-width: none;
    height: 1px;
    background: rgba(0,20,60,0.08);
    margin: 6px 0 8px;
    align-self: stretch;
  }
  .kpi-col-empty::before { display: none; }

  /* ── C01 AI Agent Synthesis + TIMM: stack (full-width rows) ─
     Legacy .two-col: TIMM first. .card-two-col (report/preview): document order — synthesis on top, TIMM below.
  ────────────────────────────────────────────────────────────── */
  .two-col {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 1.5);
  }
  .two-col .timm-col { order: -1; }
  .card-two-col {
    grid-template-columns: 1fr;
    gap: calc(var(--u) * 1.25);
  }
  .card-two-col .timm-col { order: 0; }

  /* ── C01 Source list: covered by card footer — hide ─────── */
  .source-list { display: none; }

  /* ── C02: Slider + Domain Signals stay side-by-side ─────────
     Slider col narrow (level labels + track), bars take rest
  ────────────────────────────────────────────────────────────── */
  .c02-slider-bars-inner {
    grid-template-columns: 68px 1fr !important;
    gap: calc(var(--u) * 0.5) !important;
  }
  .c02-mod-slider-col {
    padding: 0.25rem calc(var(--u)) var(--u) 0;
  }
  .c02-mod-bars-col {
    padding: 0.25rem 0 var(--u) calc(var(--u));
  }
  /* Collapse the legend spacer that aligns labels on desktop */
  .c02-legend-spacer { height: 0; }

  /* ── Slider: wider track column; handle hit area from css/main .c02-handle ── */
  .c02-track-col { width: 52px; }

  /* ── Spider: full width below slider+bars ───────────────── */
  .c02-mod-spider { padding: calc(var(--u)) 0 calc(var(--u) * 1.5); }

}