/* Cross-page mobile adjustments. Linked from every HTML page after the
   page's own <style>, so these rules win on cascade. Goal: make a
   documentation site that's tolerable — not pretty — on phones. */

@media (max-width: 768px) {

  /* ---- Top nav: shrink + scroll horizontally if needed ---- */
  .ps-mainnav { padding: 10px 14px; }
  .ps-mainnav-inner { gap: 14px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ps-mainnav-brand { font-size: 13px; white-space: nowrap; }
  .ps-mainnav-links { gap: 14px; flex-wrap: nowrap; }
  .ps-mainnav-links a { font-size: 12.5px; white-space: nowrap; }

  /* ---- Cover sections (most pages have inline .cover styles) ---- */
  .cover { padding: 32px 20px 36px !important; }
  .cover h1 { font-size: 32px !important; line-height: 1.1 !important; max-width: 100% !important; }
  .cover h1 span { display: inline; }
  .cover p { font-size: 15px !important; max-width: 100% !important; margin-bottom: 20px !important; }
  .cover-meta { font-size: 12px !important; gap: 14px !important; }
  .cover-logos { gap: 14px !important; flex-wrap: wrap !important; }
  .cover-logos img { height: 36px !important; }
  .cover-logos .plansight-logo { height: 30px !important; }
  .cover-logos .plus { font-size: 22px !important; }
  .cover-badge { font-size: 11px !important; padding: 4px 10px !important; margin-bottom: 14px !important; }

  /* index.html ps-header variant */
  .ps-header { padding: 40px 20px 36px !important; }
  .ps-header h1 { font-size: 1.7rem !important; }
  .ps-header-meta { font-size: 0.78rem !important; gap: 16px !important; margin-top: 16px !important; }

  /* ---- Page sections ---- */
  .page, .page-alt { padding: 36px 20px 44px !important; }
  h2 { font-size: 24px !important; line-height: 1.2 !important; }
  h3 { font-size: 16px !important; }
  .subtitle { font-size: 14px !important; max-width: 100% !important; margin-bottom: 20px !important; }
  .section-label { font-size: 10px !important; padding: 3px 9px !important; }

  /* ---- Multi-column grids collapse ---- */
  .grid-2, .grid-3, .grid-4, .grid-2-1 { grid-template-columns: 1fr !important; gap: 12px !important; }
  .ps-card-grid, .ps-integration-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .benefit-grid { grid-template-columns: 1fr !important; }
  .svc-grid { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* Service card on Other Integrations */
  .svc-card { padding: 14px 16px !important; gap: 12px !important; }
  .svc-logo { flex-basis: 36px !important; width: 36px !important; height: 36px !important; }
  .svc-logo img { max-width: 22px !important; max-height: 22px !important; }
  .svc-name { font-size: 14.5px !important; }
  .svc-purpose { font-size: 12.5px !important; }
  .svc-meta { font-size: 11px !important; }
  .svc-meta code { font-size: 10.5px !important; }

  /* ---- Tables: horizontal scroll ---- */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: 12px !important;
  }
  table thead, table tbody, table tr { display: table; width: max-content; min-width: 100%; }
  table tr { table-layout: auto; }
  table th, table td { padding: 8px 10px !important; white-space: normal; }
  table td code, table th code { font-size: 11px !important; padding: 1px 4px !important; word-break: break-word; }
  /* Force section-row spans to fit to scrolling row */
  tr.ben-section-row td, tr td.ben-section-row { white-space: nowrap; }

  /* ---- Filter bar (.hf-bar) ---- */
  .hf-bar { gap: 8px !important; margin: 12px 0 !important; }
  .hf-toggles { width: 100%; }
  .hf-toggle { font-size: 10.5px !important; padding: 4px 10px !important; }
  .hf-search { flex: 1 1 100% !important; max-width: 100% !important; }
  .hf-search input { font-size: 13px !important; }
  .hf-counter { font-size: 11px !important; margin-left: 0 !important; }

  /* ---- Field-level details panels ---- */
  .ben-fields-details { margin: 18px 0 8px !important; }
  .ben-fields-details > summary { padding: 12px 14px !important; gap: 10px !important; font-size: 13px !important; }
  .ben-fields-details > summary strong { font-size: 14px !important; }
  .ben-fields-section { padding: 12px 14px 14px !important; }

  /* ---- Gap blocks ---- */
  .gap-block { padding: 16px 18px !important; margin-top: 12px !important; }
  .gap-header { flex-wrap: wrap; gap: 8px !important; }
  .gap-num { width: 26px !important; height: 26px !important; min-width: 26px !important; font-size: 12px !important; }
  .gap-block h3 { font-size: 15px !important; }
  .gap-body { font-size: 13px !important; }
  .cursor-prompt { padding: 12px 14px !important; }
  .cursor-prompt p { font-size: 12px !important; }

  /* ---- Highlight / callout boxes ---- */
  .highlight-box { padding: 18px 20px !important; }
  .highlight-box h3 { font-size: 16px !important; }
  .highlight-box p { font-size: 13px !important; }
  .callout { padding: 14px 16px !important; }
  .callout-title { font-size: 14px !important; }
  .callout p { font-size: 13px !important; }

  /* ---- Anchor pill nav (per-benefit on EN page) ---- */
  .ben-anchor { font-size: 11.5px !important; padding: 5px 10px !important; margin: 0 3px 6px 0 !important; }

  /* ---- Source-coverage banner ---- */
  div[style*="border-left: 4px solid var(--dark-green)"] { padding: 12px 14px !important; font-size: 12.5px !important; }

  /* ---- Sticky topbar (subpages) ---- */
  .ps-topbar { padding: 8px 14px !important; font-size: 0.74rem !important; }
  .ps-breadcrumb { gap: 6px !important; }

  /* ---- Intro video banner ---- */
  .intro-video { padding: 0 8px !important; margin-bottom: 20px !important; }
  .iv-bar { padding: 10px 12px !important; gap: 10px !important; }
  .iv-bar-icon { flex-basis: 30px !important; width: 30px !important; height: 30px !important; }
  .iv-bar-icon svg { width: 11px !important; height: 11px !important; }
  .iv-bar-eyebrow { font-size: 9px !important; }
  .iv-bar-title { font-size: 13.5px !important; }
  .iv-bar-action { padding: 4px 6px !important; font-size: 11px !important; }
  .iv-bar-action span { display: none !important; }

  /* ---- Chat widget: shrink slightly so closed state doesn't dominate ---- */
  .ps-chat-trigger { font-size: 13px !important; padding: 10px 14px !important; }
}

@media (max-width: 480px) {
  /* Even tighter on phones */
  .cover h1 { font-size: 26px !important; }
  .cover p { font-size: 14px !important; }
  .page, .page-alt { padding: 28px 14px 36px !important; }
  h2 { font-size: 20px !important; }
  .ps-mainnav-links { gap: 10px !important; }
  .ps-mainnav-links a { font-size: 11.5px !important; }
}