/* demo-responsive.css — readability + mobile responsiveness overlay.
   Linked LAST in each role page (after the designer's inline <style>), so these
   win by source order. Additive only — does not touch the design's structure.
   Covers brand / retailer / supplier. */

/* ── READABILITY ─────────────────────────────────────────────────────────── */

/* 1. Contrast: the design's mid/muted grays are too light under 10–12px text.
      Darken them — they're CSS vars used everywhere, so one change lifts every
      label, sub, and caption at once. */
:root {
  --fg2: #3f4542;   /* was #565E5A */
  --fg3: #69706a;   /* was #8B918C */
}

/* 2. Base bump — nudge the whole body up one notch. */
body { font-size: 15px; }

/* 3. Floor the tiniest utility text (9–10.5px) to a readable minimum. These are
      the labels/tags/captions that carry the small sizes across all screens. */
.spm-k, .spm-sub, .t-rank, .tk-tag, .tk-item, .tag, .sug-head, .soon-tag,
.r-status, .qr-issue, .you-tag, .w-tag, .pill-cnt, .th, .trend-labels,
.lf-sub, .lens-lbl .sub, .ph-hint, .kpi-sub, .stat-sub, .td-store small,
.ts-figsub, .mx-axis, .mx-quad, .honesty, .rail-foot, .ev, small {
  font-size: 11.5px !important;
  line-height: 1.45;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */

/* Tablet/small-laptop: relax the two-up panel grids first. */
@media (max-width: 900px) {
  .dist-grid, .exp-body, .pricing-grid, .ctree-grid, .ins-beats, .ac-beats,
  .changed-grid, .comp-foot, .rails, .reports-grid, .edge-grid, .cstat-grid,
  .catmix-grid, .shelf-grid, .connect-grid { grid-template-columns: 1fr !important; }
  .content { padding: 18px 16px 48px !important; }

  /* Tables must SCROLL, not crush. The design sets grid columns inline (fr units)
     per row, so without a row min-width they compress until cells wrap — the
     "not responsive" symptom. Give rows a comfortable floor and let the table
     scroll inside its card. The collapsed pricing-grid above gives the table its
     panel full width, so at ~770px it lays out cleanly; below ~660px it scrolls.
     Covers .table (.tr rows) + every *-table across brand/retailer/supplier. */
  .table, [class*="-table"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .table .tr,
  [class*="-table"] .tr,
  [class*="-table"] [class*="-row"] { min-width: 660px; }
}

/* Phone: stack EVERY dense multi-column grid to a single column, shrink padding,
   and let any wide row/table scroll instead of overflowing the viewport. */
@media (max-width: 680px) {
  .app { grid-template-columns: 1fr !important; }   /* sidebar stops squeezing main */
  .content { padding: 14px 12px 40px !important; }

  .dist-grid, .exp-body, .pricing-grid, .ctree-grid, .connect-grid, .shelf-grid,
  .lens-strip, .promo-row, .lead-row, .pres-row, .cat-top, .changed-grid,
  .comp-foot, .ins-beats, .ac-beats, .rails, .mx-row, .qrow, .h2h, .sp-metrics,
  .pres-grid, .kpi-row, .stat-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* head/lens bar wraps instead of clipping */
  .lens-bar, .topbar, .room-strip, .lens-strip { flex-wrap: wrap !important; }

  /* tables / wide horizontal rows scroll within their card */
  .table, .h2h, .fmt-bars, .matrix-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* tighten oversized display numbers so KPI tiles don't blow out */
  .kpi-v, .ts-fig, .stat-value { font-size: 1.4rem !important; }
}