/* CL_MOBILE_FIRST_RELEASE_V1
   Final mobile-only convergence layer. It intentionally loads after the legacy
   requester and page-specific styles so narrow screens have one source of truth. */

@media (max-width: 720px) {
  html {
    scroll-padding-top: 84px;
  }

  body {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Safari must not zoom the page when a field receives focus. */
  body input,
  body select,
  body textarea {
    font-size: 16px !important;
  }

  /* Shared mobile navigation: comfortable touch targets. */
  body .mobile-menu,
  body .icon-button,
  body .lang-button,
  body .cl-public-nav-button,
  body .cl-unified-menu-toggle,
  body .cl-unified-lang,
  body .cl-unified-theme {
    min-width: 44px !important;
    width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
  }

  body .main-nav a,
  body .cl-public-nav a,
  body .cl-public-nav .btn,
  body .cl-unified-nav a {
    min-height: 44px !important;
  }

  /* App/requester: put the task before the marketing proof on a phone. */
  body[data-cl-requester-revision="v1"] .cl-p1-hero {
    min-height: 0 !important;
    padding: 34px 18px 26px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  body[data-cl-requester-revision="v1"] .cl-p1-hero-side {
    display: none !important;
  }

  body[data-cl-requester-revision="v1"] .cl-p1-title {
    max-width: 13ch !important;
    margin-top: 10px !important;
    font-size: clamp(34px, 10.6vw, 46px) !important;
    line-height: .98 !important;
  }

  body[data-cl-requester-revision="v1"] .cl-p1-subtitle {
    max-width: 35ch !important;
    margin-top: 16px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  body[data-cl-requester-revision="v1"] .cl-p1-proof-pills {
    display: flex !important;
    max-width: 100% !important;
    padding-bottom: 4px !important;
    gap: 8px !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  body[data-cl-requester-revision="v1"] .cl-p1-proof-pill {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
  }

  body[data-cl-requester-revision="v1"] .cl-p1-hero-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    gap: 10px !important;
  }

  body[data-cl-requester-revision="v1"] .cl-p1-hero-actions a,
  body[data-cl-requester-revision="v1"] .cl-p1-hero-actions button,
  body[data-cl-requester-revision="v1"] #cl-p1-create-active,
  body[data-cl-requester-revision="v1"] #btnRefresh,
  body[data-cl-requester-revision="v1"] #btnCopy {
    min-height: 48px !important;
  }

  body[data-cl-requester-revision="v1"] .cl-p1-presets {
    padding-top: 26px !important;
    padding-bottom: 28px !important;
  }

  body[data-cl-requester-revision="v1"] .cl-p1-family-grid {
    gap: 10px !important;
  }

  body[data-cl-requester-revision="v1"] .cl-p1-preset-card {
    min-height: 0 !important;
    padding: 16px !important;
  }

  body[data-cl-requester-revision="v1"] .cl-p1-page {
    padding-top: 20px !important;
  }

  body[data-cl-requester-revision="v1"] .cl-p1-page > .h1,
  body[data-cl-requester-revision="v1"] .cl-p1-page > .cl-p1-page-lead {
    display: none !important;
  }

  body[data-cl-requester-revision="v1"] .cl-p1-progress,
  body[data-cl-requester-revision="v1"] .cl-r2-progress {
    margin-bottom: 14px !important;
  }

  body[data-cl-requester-revision="v1"] .cl-p1-panel--config input,
  body[data-cl-requester-revision="v1"] .cl-p1-panel--config select,
  body[data-cl-requester-revision="v1"] .cl-p1-panel--config textarea,
  body[data-cl-requester-revision="v1"] #baseFilter,
  body[data-cl-requester-revision="v1"] #quoteFilter {
    min-height: 46px !important;
    height: 46px !important;
    font-size: 16px !important;
  }

  body[data-cl-requester-revision="v1"] #cl-p1-custom-shell .inline {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  body[data-cl-requester-revision="v1"] #cl-p1-custom-shell .inline > *,
  body[data-cl-requester-revision="v1"] #cl-p1-custom-shell .cl-r2-control,
  body[data-cl-requester-revision="v1"] #cl-p1-custom-shell label {
    width: 100% !important;
    max-width: none !important;
  }

  /* A full summary card cannot be sticky when it is taller than the viewport. */
  body[data-cl-requester-revision="v1"] #cl-p1-summary-card,
  body[data-cl-requester-revision="v1"] .cl-p1-summary-card {
    position: relative !important;
    inset: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    max-height: none !important;
    box-shadow: none !important;
  }

  body[data-cl-requester-revision="v1"] #cl-p1-proof-panel {
    position: relative !important;
    top: auto !important;
  }

  body[data-cl-requester-revision="v1"] #cl-p1-proof-story {
    display: none !important;
  }

  body[data-cl-requester-revision="v1"] #cl-p1-proof-panel #cl-p1-summary-card {
    order: 1 !important;
  }

  body[data-cl-requester-revision="v1"] #cl-p1-proof-panel .cl-r2-proof-preview {
    order: 2 !important;
  }

  body[data-cl-requester-revision="v1"] #cl-p1-summary-card .cl-p1-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body[data-cl-requester-revision="v1"] #cl-p1-summary-card .cl-p1-summary-row {
    display: block !important;
    min-width: 0 !important;
    min-height: 62px !important;
    padding: 10px !important;
  }

  body[data-cl-requester-revision="v1"] #cl-p1-summary-card .cl-p1-summary-row span,
  body[data-cl-requester-revision="v1"] #cl-p1-summary-card .cl-p1-summary-row strong {
    display: block !important;
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }

  /* Existing alerts: never let the actions collapse the title column to 0px. */
  body .cl-app-alerts-mgmt {
    padding: 16px !important;
  }

  body .cl-app-alerts-mgmt-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: stretch !important;
  }

  body .cl-app-alerts-mgmt-head > div,
  body .cl-app-alerts-mgmt-head h2,
  body .cl-app-alerts-mgmt-head p {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body .cl-app-alerts-mgmt-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 8px !important;
  }

  body .cl-app-alerts-mgmt-actions a,
  body .cl-app-alerts-mgmt-actions button,
  body .cl-app-alert-card-actions button,
  body .cl-app-alert-card-actions .cl-p1-ghost {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 10px 12px !important;
    white-space: normal !important;
  }

  body .cl-app-alert-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Account and public tools: no iOS focus zoom and reliable tap targets. */
  body[data-cl-design-core="v1"] .compte-form input,
  body[data-cl-design-core="v1"] .compte-form select,
  body[data-cl-design-core="v1"] .compte-form textarea,
  body #q,
  body #ex {
    min-height: 46px !important;
    font-size: 16px !important;
  }

  body[data-cl-design-core="v1"] .compte-form button,
  body[data-cl-design-core="v1"] .compte-form .btn,
  body .cl-postpay-cta .btn,
  body .cl-postpay-retry .cl-btn,
  body .cl-live-card .btn,
  body .cl-shell-card .btn {
    min-height: 46px !important;
  }

  /* Horizontal tables stay contained and expose a visual swipe affordance. */
  body .table-wrap,
  body .cl-table-wrap,
  body [class*="table-scroll"] {
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    background-image: linear-gradient(to right, transparent calc(100% - 22px), rgba(70, 126, 199, .13));
  }
}

@media (max-width: 359px) {
  body .cl-app-alerts-mgmt-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Light requester advanced panels must not inherit dark translucent help text. */
html[data-theme="light"] body[data-cl-requester-revision="v1"] .cl-p7-market-advanced,
html[data-theme="light"] body[data-cl-requester-revision="v1"] .cl-r2-engine-details {
  border-color: #c6d4e5 !important;
  background: #f3f7fc !important;
}

html[data-theme="light"] body[data-cl-requester-revision="v1"] .cl-p7-market-advanced > summary,
html[data-theme="light"] body[data-cl-requester-revision="v1"] .cl-r2-engine-details > summary,
html[data-theme="light"] body[data-cl-requester-revision="v1"] .cl-p7-market-advanced .small,
html[data-theme="light"] body[data-cl-requester-revision="v1"] .cl-r2-engine-details .small,
html[data-theme="light"] body[data-cl-requester-revision="v1"] .cl-p7-market-advanced label,
html[data-theme="light"] body[data-cl-requester-revision="v1"] .cl-r2-engine-details label {
  color: #334a66 !important;
  -webkit-text-fill-color: #334a66 !important;
  opacity: 1 !important;
}

/* Post-payment primary actions need an unmistakable dark-theme contrast. */
html[data-theme="dark"] body .cl-postpay-cta .btn.primary,
html[data-theme="dark"] body .cl-postpay-retry .cl-btn {
  border-color: #69a9ff !important;
  background: linear-gradient(135deg, #236de1, #168fcd) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

@media (max-width: 900px) and (max-height: 500px) {
  body input,
  body select,
  body textarea {
    font-size: 16px !important;
  }

  body[data-cl-requester-revision="v1"] .cl-p1-hero {
    min-height: 0 !important;
    padding-top: 22px !important;
    padding-bottom: 18px !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-cl-requester-revision="v1"] .cl-p1-hero-side {
    display: none !important;
  }

  body[data-cl-requester-revision="v1"] .cl-p1-title {
    max-width: 18ch !important;
    font-size: clamp(31px, 6vw, 43px) !important;
  }

  body[data-cl-requester-revision="v1"] .cl-p1-subtitle,
  body[data-cl-requester-revision="v1"] .cl-p1-proof-pills,
  body[data-cl-requester-revision="v1"] .cl-p1-hero-actions .cl-p1-ghost {
    display: none !important;
  }

  body[data-cl-requester-revision="v1"] #cl-p1-summary-card,
  body[data-cl-requester-revision="v1"] .cl-p1-summary-card,
  body[data-cl-requester-revision="v1"] #cl-p1-proof-panel {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    bottom: auto !important;
    max-height: none !important;
  }

  body[data-cl-requester-revision="v1"] #cl-p1-proof-story {
    display: none !important;
  }

  body[data-cl-requester-revision="v1"] .cl-p1-panel--config input,
  body[data-cl-requester-revision="v1"] .cl-p1-panel--config select,
  body[data-cl-requester-revision="v1"] .cl-p1-panel--config textarea,
  body[data-cl-requester-revision="v1"] #baseFilter,
  body[data-cl-requester-revision="v1"] #quoteFilter {
    font-size: 16px !important;
  }
}