/* 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; }

  /* ---------- long reference lists (the states): one row to open, same look as the contents fold */
  details.co-mfold { border-top: 1px solid var(--co-ink); border-bottom: 1px solid var(--co-ink); margin: 20px 0 24px; }
  details.co-mfold > 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-mfold > summary::-webkit-details-marker { display: none; }
  details.co-mfold > 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-mfold[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
  details.co-mfold > [data-co-fold] { margin: 0 0 12px; }

  /* ---------- 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, details.co-mfold > summary { display: none; }
  details.co-mfilters, details.co-mtoc { display: block; border: 0; margin: 0; padding: 0; }
  details.co-mfold { display: contents; }
  .co-mfilters__body { display: flex; flex-direction: column; gap: 8px; }
}

/* Home, phones only (owner 2026-10-04): the door panel and the three quote boxes drawings are dropped, the USA map stays. */
@media (max-width: 760px) {
  .cx-sec .co-section__graphic.cx-graphic--no-phone { display: none; }
}

/* Home, phones only (owner 2026-10-04): the section titles ("Minor damage" and friends) a step bigger, the hero title with them so it is never the smaller one; the line under them keeps its size. */
@media (max-width: 760px) {
  .cx-sec .co-heading .co-h1 { font-size: clamp(40px, 12vw, 48px); }
}

/* Signed-in header on phones (owner 2026-10-04): the wordmark was squeezed by the extra links until the car hidden above
   the words showed through. The file is now clipped to the words, and here the wordmark scales as a whole, never squashed. */
@media (max-width: 560px) {
  .cx-header--auth { gap: 10px; }
  .cx-header--auth .co-brand { flex: 0 1 123px; min-width: 70px; }
  .cx-header--auth .co-brand .co-brand__wordmark { width: 100%; height: auto; max-height: 40px; }
}
/* A signed-in business has two counted links and no room left: the "Get quotes" button (a driver's button) steps aside on
   phones. The same on the very narrowest phones for everyone signed in. */
@media (max-width: 560px) { .cx-header--provider .cx-header__cta { display: none; } }
@media (max-width: 350px) { .cx-header--auth .cx-header__cta { display: none; } }

/* QA 2026-10-05: keep the phone quote action close to the hero illustration. */
@media (max-width: 900px) {
  .cx-sec.cx-sec--hero { padding-top: 24px; padding-bottom: 32px; }
  .cx-sec.cx-sec--hero .co-section { gap: 0; }
  .cx-sec.cx-sec--hero .co-section__graphic--hero { margin-top: 12px; gap: 4px; }
  .cx-sec.cx-sec--hero .co-section__graphic--hero svg { max-width: 440px; max-height: 200px; }
  .cx-sec.cx-sec--hero .co-intro { margin-top: 16px; }
  .cx-sec.cx-sec--hero .co-action { margin-top: 16px; }
  .cx-sec.cx-sec--hero .co-section__main > .co-helper { margin-top: 12px; }
  .cx-sec.cx-sec--hero .cx-stats { margin-top: 20px; }
}