/* JJS Internet mobile inner-fit review, based on user UI Studio proposal 2026-10-28.
 * Keep the user's outer card widths and intended C03 288px collapsed height.
 * Do not apply raw per-control translations or the proposed 5-8px text sizes.
 * No quote/form field is removed. Expanded details and longer discount cases grow.
 */
@media (max-width:600px) {
  body.experience-ui[data-page="internet"] .internet-layout {
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    align-items:start!important;
    gap:12px!important;
  }
  /* Equivalent to the user's C02 upward / C03 downward visual rearrangement,
     without detached transforms or overlap with the surrounding sections. */
  body.experience-ui[data-page="internet"] .internet-layout > [data-ui-name="C02"] {
    grid-column:1!important;
    grid-row:1!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    height:auto!important;
  }
  body.experience-ui[data-page="internet"] .internet-layout > [data-ui-name="C03"] {
    grid-column:1!important;
    grid-row:2!important;
    min-width:0!important;
  }

  /* C02: 3-8 carrier choices in the user's 287x75 strip. Horizontal scroll
     preserves usable button targets without stacking or overlapping cards. */
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] #providerOptions {
    display:flex!important;
    flex-flow:row nowrap!important;
    align-items:center!important;
    width:min(287px,100%)!important;
    max-width:100%!important;
    height:75px!important;
    min-height:75px!important;
    padding:4px!important;
    gap:4px!important;
    box-sizing:border-box!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x proximity!important;
    overscroll-behavior-x:contain!important;
    scrollbar-width:thin;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] #providerOptions > button {
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:2px!important;
    flex:0 0 85px!important;
    width:85px!important;
    height:64px!important;
    min-width:85px!important;
    min-height:64px!important;
    padding:4px 2px!important;
    transform:none!important;
    box-sizing:border-box!important;
    text-align:center!important;
    white-space:normal!important;
    scroll-snap-align:start!important;
  }
  /* Earlier carrier-specific :has() rules have higher specificity and
     otherwise restore a two-column grid when the API supplies 3 choices. */
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] #providerOptions#providerOptions {
    display:flex!important;
    flex-flow:row nowrap!important;
    align-items:center!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] #providerOptions#providerOptions > button {
    flex:0 0 85px!important;
    width:85px!important;
    min-width:85px!important;
    height:64px!important;
    min-height:64px!important;
    padding:3px 2px!important;
    gap:2px!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] #providerOptions#providerOptions .provider-mark {
    width:24px!important;
    height:20px!important;
    min-width:24px!important;
    min-height:20px!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] #providerOptions .provider-mark {
    width:26px!important;
    min-width:26px!important;
    height:23px!important;
    min-height:23px!important;
    font-size:10px!important;
    line-height:1!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] #providerOptions > button > span:last-child {
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    line-height:1.12!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] #providerOptions > button b {
    display:block!important;
    font-size:10px!important;
    line-height:1.12!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] #providerOptions > button small {
    display:block!important;
    font-size:9px!important;
    line-height:1.12!important;
    overflow-wrap:anywhere!important;
  }

  /* Customer type: compress the controls, not the enclosing C02 card. */
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-business-choice {
    height:auto!important;
    min-height:0!important;
    padding:2px 0 6px!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-customer-choices {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:5px!important;
    padding:3px!important;
    height:56px!important;
    box-sizing:border-box!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-customer-toggle {
    height:100%!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    padding:5px!important;
    align-items:center!important;
    box-sizing:border-box!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-customer-toggle b {
    font-size:11px!important;
    line-height:1.16!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-customer-toggle small,
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] .business-pricing-hint {
    font-size:10px!important;
    line-height:1.25!important;
    white-space:normal!important;
    overflow-wrap:break-word!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] .business-pricing-hint {
    margin:4px 1px 0!important;
  }

  /* 03 Internet speed / 04 TV: three fully legible cards in compact rows. */
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] #speedOptions,
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] #tvOptions {
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:minmax(0,1fr)!important;
    width:100%!important;
    min-width:0!important;
    gap:4px!important;
    padding:3px!important;
    box-sizing:border-box!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] #speedOptions {height:82px!important;min-height:82px!important;}
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] #tvOptions {height:79px!important;min-height:79px!important;}
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] #speedOptions > button,
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] #tvOptions > button {
    width:100%!important;
    min-width:0!important;
    height:100%!important;
    min-height:0!important;
    padding:5px 3px!important;
    transform:none!important;
    box-sizing:border-box!important;
    overflow-wrap:anywhere!important;
    white-space:normal!important;
    gap:2px!important;
  }
  /* Override older 104px min-height rules without changing the 82/79px trays. */
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] #speedOptions#speedOptions > button,
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] #tvOptions#tvOptions > button {
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    padding:4px 2px!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] #speedOptions > button :is(b,strong),
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] #tvOptions > button :is(b,strong) {
    font-size:10px!important;
    line-height:1.14!important;
    white-space:normal!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] #speedOptions > button small,
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] #tvOptions > button small {
    font-size:9px!important;
    line-height:1.15!important;
    white-space:normal!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] #routerOption + span {
    font-size:10px!important;
    line-height:1.3!important;
  }

  /* C03: 288px collapsed card, but keep the full, functional details drawer. */
  body.experience-ui[data-page="internet"] [data-ui-name="C03"].internet-summary.estimate-card {
    display:grid!important;
    grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)!important;
    grid-template-areas:"overview facts" "details details" "action action" "status status"!important;
    grid-template-rows:176px 23px 38px 18px!important;
    width:100%!important;
    height:288px!important;
    min-height:288px!important;
    max-height:none!important;
    gap:3px 6px!important;
    padding:8px!important;
    box-sizing:border-box!important;
    overflow:visible!important;
    align-content:start!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C03"] > .estimate-overview {
    grid-area:overview!important;
    grid-row:1!important;
    grid-column:1!important;
    height:176px!important;
    min-height:0!important;
    padding:7px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C03"] .estimate-card-heading :is(.section-kicker,p) {
    font-size:9px!important;
    line-height:1.2!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C03"] .estimate-card-heading h2 {
    font-size:12px!important;
    line-height:1.22!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C03"] .estimate-overview .monthly-total {
    font-size:19px!important;
    line-height:1.2!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C03"] .internet-summary-product :is(b,.summary-detail) {
    font-size:10px!important;
    line-height:1.2!important;
    overflow-wrap:break-word!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C03"] > .internet-quick-facts {
    grid-area:facts!important;
    grid-row:1!important;
    grid-column:2!important;
    height:176px!important;
    min-height:0!important;
    width:100%!important;
    padding:5px 7px!important;
    gap:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C03"] .internet-quick-row {
    padding:3px 0!important;
    min-width:0!important;
    gap:3px!important;
    line-height:1.15!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C03"] .internet-quick-row > span {
    font-size:10px!important;
    line-height:1.15!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C03"] .internet-quick-row > :is(b,strong) {
    font-size:10px!important;
    line-height:1.15!important;
    overflow-wrap:anywhere!important;
    text-align:right!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C03"] .internet-quick-benefit strong {
    font-size:11px!important;
    line-height:1.15!important;
  }
  /* The user omitted these extra notes from the compact preview. The main
     prototype disclaimer elsewhere on the page remains visible. */
  body.experience-ui[data-page="internet"] [data-ui-name="C03"] #quickGiftNote,
  body.experience-ui[data-page="internet"] [data-ui-name="C03"] #priceNote {display:none!important;}
  body.experience-ui[data-page="internet"] [data-ui-name="C03"] > .internet-estimate-details {
    grid-area:details!important;
    grid-row:2!important;
    grid-column:1 / -1!important;
    width:100%!important;
    min-height:0!important;
    margin:0!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C03"] .internet-estimate-details > summary {
    height:23px!important;
    min-height:23px!important;
    padding:1px 8px!important;
    font-size:10px!important;
    line-height:1.1!important;
    box-sizing:border-box!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C03"] .internet-estimate-details > summary span {
    font-size:10px!important;
    line-height:1.1!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C03"] .internet-estimate-details > summary .estimate-details-copy {
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    min-height:0!important;
    height:21px!important;
    gap:5px!important;
    white-space:nowrap!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C03"] .internet-estimate-details > summary .estimate-details-copy small {
    font-size:9px!important;
    white-space:nowrap!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C03"] .internet-estimate-details > summary .estimate-details-toggle {
    width:18px!important;
    height:18px!important;
    min-height:0!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C03"] > .summary-action {
    grid-area:action!important;
    grid-row:3!important;
    grid-column:1 / -1!important;
    height:38px!important;
    min-height:38px!important;
    margin:0!important;
    padding:7px 12px!important;
    font-size:12px!important;
    box-sizing:border-box!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C03"] > .summary-status {
    grid-area:status!important;
    grid-row:4!important;
    grid-column:1 / -1!important;
    min-height:0!important;
    margin:0!important;
    font-size:9px!important;
    line-height:1.25!important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C03"] > .internet-estimate-details[open] ~ .summary-action {margin-top:0!important;}
  /* Expanded terms must never be clipped just to preserve the collapsed size. */
  body.experience-ui[data-page="internet"] [data-ui-name="C03"]:has(.internet-estimate-details[open]),
  body.experience-ui[data-page="internet"] [data-ui-name="C03"]:has(#quickDiscountRow:not([hidden])) {
    height:auto!important;
    min-height:288px!important;
    grid-template-rows:176px minmax(23px,auto) 38px minmax(18px,auto)!important;
  }
}