/* Lose the Dent phone layer. Loaded LAST by components/layouts/app.blade.php, after ltd.css, ltd-site.css and
   ltd-journey.css. Phone widths only; the desktop frame is untouched. Most visitors are on a phone next to their
   car: long forms become steps, filters and contents fold away, and every tap target is at least 44px. */

/* Step machinery (ltd-mobile.js): hidden parts of a stepped form. Wins over Alpine's inline x-show display. */
.co-st-off { display: none !important; }

@media (max-width: 900px) {
  /* The homepage's scroll-focus dim read as greyed-out, disabled text on a phone: sections stay at full strength. */
  .cx-js .cx-sec__inner, .cx-js .cx-sec--band .co-band > * { opacity: 1 !important; }
}

@media (max-width: 760px) {
  /* ---------- multi-step forms */
  .co-steps-progress {
    position: relative; margin: 0 0 20px; padding: 0 0 10px; font-family: var(--co-font-display); font-size: var(--co-cap-size, 15px); font-weight: 700;
    text-transform: uppercase; letter-spacing: var(--co-cap-ls, .04em); color: var(--co-ink); border-bottom: 1px solid var(--co-ink);
  }
  .co-steps-progress::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 4px; width: var(--co-steps-pc, 0%); background: var(--co-blue); transition: width .25s ease; }
  .co-steps-bar {
    position: sticky; bottom: 0; z-index: 30; display: flex; gap: 8px; margin: 24px calc(-1 * var(--co-gutter, 16px)) 0;
    padding: 12px var(--co-gutter, 16px) calc(12px + env(safe-area-inset-bottom)); background: var(--co-ground); border-top: 1px solid var(--co-ink);
  }
  .co-steps-bar .co-btn { flex: 1 1 0; margin: 0; min-height: 48px; }
  .co-steps-bar [hidden] { display: none !important; }
  .co-steps-on.co-steps-last .co-steps-bar:not(:has([data-co-back]:not([hidden]))) { display: none; }
  .co-steps-on .co-form__actions { margin-top: 16px; }
  .co-steps-on .co-form__actions .co-btn { min-height: 48px; }
  .co-steps-on fieldset.co-fieldset { margin-top: 0; }

  /* ---------- directory filters: one disclosure instead of three screens of links */
  details.co-mfilters { border: 1px solid var(--co-ink); border-radius: var(--co-radius); background: var(--co-ground); }
  details.co-mfilters > summary {
    list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px;
    padding: 0 14px; cursor: pointer; font-weight: 700; text-transform: uppercase;
  }
  details.co-mfilters > summary::-webkit-details-marker { display: none; }
  details.co-mfilters > summary em { font-style: normal; font-weight: 400; text-transform: none; color: var(--co-blue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  details.co-mfilters > summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--co-ink); border-bottom: 2px solid var(--co-ink); transform: rotate(45deg) translate(-2px, -2px); }
  details.co-mfilters[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
  details.co-mfilters[open] > summary { border-bottom: 1px solid var(--co-ink); }
  .co-mfilters__body { display: flex; flex-direction: column; gap: 0; padding: 4px 14px 12px; }
  .co-mfilters__body > .co-nav-list__head { margin-top: 14px; }

  /* ---------- article contents list: folded, like the filters */
  details.co-mtoc { border-top: 1px solid var(--co-ink); border-bottom: 1px solid var(--co-ink); margin: 20px 0 24px; }
  details.co-mtoc > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 48px; font-weight: 700; text-transform: uppercase; cursor: pointer; }
  details.co-mtoc > summary::-webkit-details-marker { display: none; }
  details.co-mtoc > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--co-ink); border-bottom: 2px solid var(--co-ink); transform: rotate(45deg) translate(-2px, -2px); }
  details.co-mtoc[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
  details.co-mtoc > nav { margin: 0 0 8px; }

  /* ---------- tap targets: 44px rows for list links, footer links and choices */
  .co-nav-list a, .co-nav-list button, .co-mfilters__body a, .co-mfilters__body button { display: flex; align-items: center; min-height: 44px; }
  .co-nav-list { gap: 0; }
  .co-footer__links { flex-wrap: wrap; gap: 0 20px; }
  .co-footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
  .co-grid--list .co-label, .co-grid .co-block > a.co-label { display: inline-flex; align-items: center; min-height: 44px; }
  .co-choices { gap: 0; }
  .co-choice { align-items: center; min-height: 44px; }
  .co-choice input { width: 22px; height: 22px; }
  .co-choice--text { align-items: flex-start; padding: 10px 0; }
  .co-choice--text input { margin-top: 0; }
  /* Lists of 4+ short options in two columns: half the height, so a step fits the screen. Consent lines
     (.co-choice--text) stay full width. */
  .co-choices:has(> .co-choice:nth-child(4)):not(:has(> .co-choice--text)) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .co-choices:has(> .co-choice:nth-child(4)):not(:has(> .co-choice--text)) .co-choice { font-size: 14px; line-height: 1.25; }

  /* ---------- article tables: one card per row */
  .co-prose table[data-co-cards], .co-prose__body table[data-co-cards] { display: block; width: 100%; border: 0; }
  table[data-co-cards] thead { display: none; }
  table[data-co-cards] tbody, table[data-co-cards] tr, table[data-co-cards] td, table[data-co-cards] th { display: block; width: auto; }
  table[data-co-cards] tr { border: 1px solid var(--co-rule); border-radius: var(--co-radius); padding: 12px 14px; margin: 0 0 12px; }
  table[data-co-cards] tr:first-child:has(> th) { display: none; }
  table[data-co-cards] td { padding: 4px 0; border: 0; text-align: left; }
  table[data-co-cards] td:first-child { font-weight: 700; font-size: 17px; padding-bottom: 8px; }
  table[data-co-cards] td[data-label]:not(:first-child)::before {
    content: attr(data-label); display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--co-ink-muted, #555);
  }

  /* ---------- reference lists (states, cities) in two columns, so 50 states are not 50 screens */
  .co-grid.co-grid--list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }

  /* ---------- text links and the header on a phone: 44px targets */
  a.co-label, button.co-label { min-height: 44px; }
  .co-block > a, .co-block > span > a, .co-entry > a, .co-form-aside .co-block a { display: inline-flex; align-items: center; min-height: 44px; }
  .co-badge { min-height: 28px; }
}

/* Wider than a phone: the folds built by ltd-mobile.js are plain, always-open wrappers: no summary row, the filter
   column keeps its 8px list rhythm (the links used to be direct children of aside.co-nav-list). */
@media (min-width: 761px) {
  details.co-mfilters > summary, details.co-mtoc > summary { display: none; }
  details.co-mfilters, details.co-mtoc { display: block; border: 0; margin: 0; padding: 0; }
  .co-mfilters__body { display: flex; flex-direction: column; gap: 8px; }
}