/* ============================================================================
   responsive.css — shared responsive utilities (Bid Intelligence)
   Breakpoint ladder (desktop-first graceful degradation):
     Desktop  >= 1025px  : untouched base layout
     Tablet   641-1024px : @media (max-width:1024px)
     Phone    <= 640px   : @media (max-width:640px)
     Hard floor          : 320px (no horizontal page overflow)
   All rules here are max-width-scoped — they never affect desktop.
   ========================================================================== */

/* ---- Table: sideways scroll + sticky first column (baseline for every table) */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
@media (max-width: 1024px) {
  .table-scroll > table { min-width: max-content; }
  .table-scroll th:first-child,
  .table-scroll td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface, #fff);
    box-shadow: 1px 0 0 rgba(0,0,0,.08);
  }
  /* keep the pinned first cell in sync with row-hover highlight */
  .table-scroll tr:hover th:first-child,
  .table-scroll tr:hover td:first-child { background: var(--surface-2, #f4f0e8); }
  /* corner (sticky header + sticky column) must sit above both */
  .table-scroll thead th:first-child { z-index: 3; }
}
@media print {
  /* never clip table content when printing */
  .table-scroll { overflow: visible; }
}

/* ---- KPI / card grids: stack down the ladder ----------------------------- */
@media (max-width: 1024px) {
  .kpi-stack { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 640px) {
  .kpi-stack { grid-template-columns: 1fr !important; }
}

/* ---- Mobile sheet base (modals become bottom sheets on phones) ----------- */
@media (max-width: 640px) {
  .sheet-on-mobile {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .sheet-on-mobile > .sheet-body {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;   /* fallback for older WebViews without dvh */
    max-height: 90dvh !important;
    overflow-y: auto !important;
    border-radius: 16px 16px 0 0 !important;
  }
}

/* ---- Touch target floor on coarse pointers ------------------------------- */
@media (hover: none) and (pointer: coarse) {
  .tap-target { min-height: 44px; min-width: 44px; }
}

/* ---- Priority columns: hide secondary cells on phones, tap to expand ----- */
.row-expand-btn { display: none; }
/* detail panels are hidden at ALL widths by default (incl. desktop, where the
   renderers still emit them); only revealed when their row is expanded on phones */
tr.row-detail { display: none; }
@media (max-width: 640px) {
  .table-scroll .col-secondary { display: none; }
  .row-expand-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border: 0; background: transparent;
    cursor: pointer; font-size: 14px; line-height: 1; color: inherit;
    transition: transform .15s ease;
  }
  tr.is-expanded .row-expand-btn { transform: rotate(90deg); }
  tr.is-expanded + tr.row-detail { display: table-row; }
  tr.row-detail > td { padding: 8px 12px; background: var(--surface-2, rgba(0,0,0,.03)); }
  .row-detail dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: var(--t-xs, 12px); }
  .row-detail dt { opacity: .6; }
  .row-detail dd { margin: 0; font-weight: 600; }
}
@media (prefers-reduced-motion: reduce) { .row-expand-btn { transition: none; } }

/* ---- phone-only inline captions (e.g. competitor name under "Their" price) -- */
.phone-only { display: none; }
@media (max-width: 640px) { .phone-only { display: block; } }

/* ---- Sticky anchor when the first column(s) are hidden on phones ----------- */
/* Some tables (Benchmark, Gorman-vs-competitor) carry .col-secondary on their
   first column, so it's display:none at <=640 and the generic sticky :first-child
   rule has no visible cell to pin. Mark the intended phone anchor column with
   .col-sticky-phone to pin the first VISIBLE column instead. Inert >640px. */
@media (max-width: 640px) {
  .table-scroll .col-sticky-phone {
    position: sticky; left: 0; z-index: 1;
    background: var(--surface, #fff);
    box-shadow: 1px 0 0 rgba(0,0,0,.08);
  }
  .table-scroll tr:hover .col-sticky-phone { background: var(--surface-2, #f4f0e8); }
  .table-scroll thead th.col-sticky-phone { z-index: 3; }
}