/* Mobile layer for the Provider Intelligence line pages.
   Loaded after theme.css on every list and detail page. Nothing here applies
   above 700px, so the desktop layout is untouched.

   The results table becomes one card per result. The table markup stays exactly
   as it is: cards.js copies each column header onto its cells as data-l, and
   the rules below lay those out. That means a page gets cards without changing
   how it renders rows. */

@media (max-width: 700px) {

  /* ---- room to breathe ---------------------------------------------- */
  body { font-size: 15px; }
  main, .wrap { padding-left: 12px; padding-right: 12px; }

  /* The header eats 200px before a reader sees anything. Halve it. */
  body header { padding-top: 10px; padding-bottom: 10px; }
  .crumbs { font-size: 15px; line-height: 1.25; }
  header nav { margin-top: 6px; }
  header nav a { padding: 8px 0; margin-right: 16px; display: inline-block; }

  /* ---- tap targets --------------------------------------------------- */
  /* 44px is the Apple guideline and roughly a fingertip. */
  body input, body select, body button, body .btn {
    min-height: 44px;
    font-size: 16px;              /* under 16px iOS zooms the page on focus */
  }
  input[type=number] { min-width: 0; }
  select { -webkit-appearance: none; appearance: none; padding-right: 28px; }

  /* ---- filter row: one scrollable strip, not a wrapping block -------- */
  /* Wrapping five dropdown buttons costs about 150px of vertical space before
     the first result. Scrolling them sideways costs one line.
     Only the filter bar and the near-search row. NOT .controls generally: that
     class also carries the result count, Export CSV and the List/Map toggle,
     and a sideways strip pushes them off the screen where nobody finds them. */
  body .fbar, body .fbar .cats, body #nearrow {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding-bottom: 4px;
  }
  body .fbar::-webkit-scrollbar, body #nearrow::-webkit-scrollbar { display: none; }
  body .fbar > *, body .fbar .cats > *, body #nearrow > * { flex: 0 0 auto; }
  body .fbar { align-items: center; }
  .fbar .fbt { font-weight: 600; }
  /* "Clear all" rides in the same strip instead of claiming a row. */
  .fbar .clearall { margin-left: auto; }

  /* The search box stays full width; it is the primary action on a phone. */
  input[type=text]#q, input[type=search] { width: 100%; box-sizing: border-box; }

  /* ---- table becomes cards ------------------------------------------- */
  /* The list pages cap .scroll at 640px and scroll inside it. Cards run down
     the page instead, so the cap has to go with the scrolling: left in place
     under overflow:visible, the cards spill out of a 640px box and paint over
     the note that follows the table. Each card draws its own frame, so the
     container's border and fill go too. */
  body .scroll { overflow: visible; max-height: none; border: 0; background: none; }

  /* A menu taller than the screen cannot be scrolled back to. */
  .dd .menu { max-height: 60vh; overflow-y: auto; }

  body table.cardify thead { position: absolute; left: -9999px; }   /* keep for a11y */
  body table.cardify, body table.cardify tbody, body table.cardify tr, body table.cardify td {
    display: block;
    width: auto;
  }
  body table.cardify tbody tr {
    background: #fff;
    border: 1px solid #dfe4ea;
    border-radius: 10px;
    margin: 0 0 10px;
    padding: 12px 14px;
  }
  body table.cardify tbody td {
    border: 0;
    padding: 3px 0;
    display: flex;
    gap: 12px;
    align-items: baseline;
    justify-content: space-between;
    text-align: right;
    white-space: normal;
  }
  table.cardify tbody td::before {
    content: attr(data-l);
    flex: 0 0 auto;
    color: #6b7580;
    font-size: 12px;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-align: left;
  }
  /* First column is the card title, full width, no label. */
  table.cardify tbody td:first-child {
    display: block;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eef1f4;
  }
  table.cardify tbody td:first-child::before { display: none; }
  table.cardify tbody td:first-child a { display: block; }

  /* A long value reads badly right-aligned against its label. */
  table.cardify tbody td.is-block { display: block; text-align: left; }
  table.cardify tbody td.is-block::before { display: block; margin-bottom: 2px; }

  /* Ratings: show Overall on the collapsed card, the other three on More.
     The SNF page marks the overall row .rt.main, which is what this hangs on. */
  table.cardify tbody td .rt:not(.main) { display: none; }
  table.cardify tbody tr.open td .rt { display: block; }

  /* A cell the page left empty should not leave a labelled blank line. */
  table.cardify tbody td.is-empty { display: none; }

  /* Secondary detail, shown only when the card is expanded. */
  table.cardify tbody td.is-extra { display: none; }
  table.cardify tbody tr.open td.is-extra { display: flex; }
  .cardmore {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 0;
    min-height: 0;
    background: none;
    border: 0;
    color: #1f6feb;
    font-size: 14px;
  }

  /* ---- misc ----------------------------------------------------------- */
  #map, .map { height: 60vh !important; }
  table:not(.cardify) { font-size: 13px; }   /* detail-page tables keep scrolling */
}