/* ══════════════════════════════════════════════════════════════
   Legal Eye · Universal mobile + tablet layer.
   Load on every ui_kits surface AFTER colors_and_type.css.
   Desktop is unchanged; rules are gated behind breakpoints.
   - Tablet (iPad)  : 700–1024px  → 2-col grids relax, padding eases
   - Mobile (phone) : ≤ 700px     → single column, touch targets ≥44px,
                                     bottom-nav clearance, safe areas
   ══════════════════════════════════════════════════════════════ */

/* Safe-area + smooth scroll baseline (all sizes) */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: rgba(191,155,48,0.18); }

/* ─────────── TABLET (iPad portrait & landscape split) ─────────── */
@media (min-width: 701px) and (max-width: 1024px) {
  /* relax any fixed wide side-rails to a comfortable tablet ratio */
  .cb-grid, .lp-grid, .cc-pay-grid, .st-grid, .lp-grid { gap: 22px; }
  /* generous reading column */
  .ld-wrap, .cs-wrap, .lw-wrap, .se-wrap, .gl-wrap, .ag-wrap, .pl-wrap, .cb-wrap, .st-wrap, .cc-wrap, .dl-wrap, .an-wrap, .in-wrap, .ss-wrap { padding-left: 28px; padding-right: 28px; }
}

/* ─────────── MOBILE (phone) ─────────── */
@media (max-width: 700px) {
  /* 1 · Collapse every known 2/3-col layout to a single column */
  .cb-grid, .lp-grid, .cc-pay-grid, .st-grid, .cc-grid, .pl-grid,
  .an-grid, .lp-rows, .fm-book, .fm-pay-grid, .lp-kpis, .fm-props, .fm-steps,
  .co-pay-grid, .co-choose, .co-split, .lp-kpis, .ad-cols {
    grid-template-columns: 1fr !important;
  }

  /* 2 · Ease page padding + headline scale on small screens */
  .ld-wrap, .cs-wrap, .lw-wrap, .se-wrap, .gl-wrap, .ag-wrap, .pl-wrap,
  .cb-wrap, .st-wrap, .cc-wrap, .dl-wrap, .an-wrap, .in-wrap, .ss-wrap,
  .co-wrap, .fm-wrap, .land-hero, .ev-summary {
    padding-left: 16px !important; padding-right: 16px !important;
  }
  h1, .ld-head h1, .cs-h1, .lw-h1, .se-h1, .gl-h1, .ag-h1, .pl-h1,
  .cb-title, .st-h1, .cc-h1, .dl-h1, .an-h1, .co-h1, .fm-h1 {
    font-size: clamp(26px, 8vw, 34px) !important; line-height: 1.12 !important;
  }

  /* 3 · Touch targets ≥ 44px on every interactive chip/button/row */
  button, .cs-chip, .lw-cat, .pl-filter, .gl-cat, .ev-filter, .co-chip,
  .fm-day, .cc-proc, .dl-proc, .ld-filter, .ld-avail-btn, .se-filter,
  a.cs-row, a.se-result, .pl-card, .lw-law, .gl-term {
    min-height: 44px;
  }
  .cs-chip, .lw-cat, .pl-filter, .ev-filter, .gl-cat {
    display: inline-flex; align-items: center; padding-top: 10px; padding-bottom: 10px;
  }

  /* 4 · Sticky filter rails become normal stacked blocks */
  .cs-rail, .cb-rail, .lp-book, .co-summary-card, .st-rail, .ad-side {
    position: static !important; width: auto !important; height: auto !important; top: auto !important;
  }
  .cs-grid { grid-template-columns: 1fr !important; }
  .cs-rail { flex-direction: column !important; }

  /* 5 · Tables scroll horizontally instead of squishing */
  .ev-table-wrap, .cmp-table-wrap, .ad-tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ev-table, .cmp-table { min-width: 560px; }

  /* 6 · Topbars: trim padding, keep wordmark legible */
  .cs-top, .lw-top, .se-top, .gl-top, .ag-top, .pl-top, .cb-top, .st-top,
  .cc-top, .dl-top, .an-top, .in-top, .co-top, .fm-top, .ld-top, .lp-top, .ad-top {
    padding-left: 16px !important; padding-right: 16px !important;
  }

  /* 7 · Clearance for the bottom tab-bar (injected by surface-helpers) */
  body.le-has-tabbar { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }

  /* 8 · Admin console: dark sidebar becomes a top strip */
  .ad-shell { grid-template-columns: 1fr !important; }
  .ad-side { display: flex; flex-direction: row; overflow-x: auto; gap: 6px; border-inline-end: 0; border-bottom: 1px solid rgba(217,184,92,0.2); }
  .ad-nav { flex-direction: row; }
  .ad-nav-sec { display: none; }

  /* 9 · App workspace: handled in app-mobile rules (sidebar drawer) */
}

/* Reduce motion safety for shimmer/blink already covered elsewhere */