/* Mobile refinements for imported resources, Help and integration forms.
 * Load after forms.css, editorial.css and the page-specific stylesheets.
 */

/* Let native controls shrink inside grid tracks without reducing their text. */
.test-form,
.test-form > *,
.test-field,
.test-form-wrap {
  min-width: 0;
}
.test-field :is(input, select, textarea) {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  scroll-margin-block: 100px 120px;
}
.test-field textarea { min-height: 128px; }
.test-consent {
  min-height: 48px;
  padding-block: 8px;
  cursor: pointer;
}
.test-consent input { margin: 2px 0 0; }
.test-submit,
.test-form-status,
.test-form-note { overflow-wrap: anywhere; }
.test-form-status { scroll-margin-block: 100px 120px; }
.test-form-status:focus {
  outline: 3px solid #111214;
  outline-offset: 5px;
}
.test-form-status a {
  display: inline-block;
  min-height: 44px;
  padding-block: 8px;
}
.test-environment-bar a,
.test-help-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.test-newsletter summary { min-height: 48px; }
.test-newsletter summary:focus-visible,
.test-consent:focus-within {
  outline: 3px solid #111214;
  outline-offset: 5px;
}

/* Keep table semantics and expose a visible, keyboard-focusable scroll area. */
.mobile-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  margin-block: 1.5rem;
}
.mobile-table-scroll:focus-visible {
  outline: 3px solid #111214;
  outline-offset: 4px;
}
.prose .mobile-table-scroll table,
.integration-header ~ main .mobile-table-scroll table {
  display: table;
  width: 100%;
  max-width: none;
  overflow: visible;
}
.prose .mobile-table-scroll th,
.prose .mobile-table-scroll td { vertical-align: top; }

/* Imported editorial pages keep wide tables and code within the reading area. */
.integration-header ~ main { min-width: 0; overflow-wrap: anywhere; }
.integration-header ~ main :is(figure, .comparison-table) {
  min-width: 0;
  max-width: 100%;
  margin-inline: 0;
}
.integration-header ~ main :is(table, pre) { max-width: 100%; overflow-x: auto; }
.integration-header ~ main pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.integration-header nav a,
.integration-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.integration-header ~ main :is(.resource-back, .v2-btn_blue) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
}

@media (max-width: 760px) {
  .test-form { grid-template-columns: minmax(0, 1fr); }
  .test-submit { width: 100%; justify-self: stretch; }
  .test-form-section { padding-inline: max(20px, 5vw); }

  .oci-direction :is(.o-readiness-intro, .o-toolkit-layout) > *,
  .oci-direction .o-answer-option > span,
  .oci-direction .o-result-answers li > div,
  .oci-direction .o-rank-list li > span { min-width: 0; }
  .oci-direction :is(.o-readiness, .o-toolkit-layout) { overflow-wrap: anywhere; }
  .oci-direction .o-readiness :is(select, input) {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    scroll-margin-block: 100px 120px;
  }
  .oci-direction .o-resource-button {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .oci-direction :is(.o-result-answers, .o-result-method) summary {
    min-height: 48px;
    padding-block: 12px;
    cursor: pointer;
  }
  .oci-direction .o-dimension-results dt {
    flex-wrap: wrap;
    gap: 4px 12px;
  }
  .oci-direction .o-dimension-results dt span { white-space: nowrap; }
  .oci-direction .o-rank-list button { min-width: 48px; min-height: 48px; }
  .oci-direction .o-result-answers button { flex-shrink: 0; min-height: 48px; }

  .article-grid > *,
  .search-filters > div,
  .search-results li,
  .topic-card,
  .article-list li { min-width: 0; }
  .page-hero h1,
  .article-content h1,
  .search-results h2,
  .breadcrumbs,
  .topic-nav a { overflow-wrap: anywhere; }
  .search-row input,
  .search-filters select {
    font-size: 16px;
    min-width: 0;
    max-width: 100%;
    scroll-margin-block: 32px 100px;
  }
  .prose :is(ul, ol):not(.source-selectors) { padding-inline-start: 1.4rem; }
  .prose :is(.example-box, blockquote, .use-cases-callout) { padding: 1rem; }
}

@media (max-width: 560px) {
  .oci-direction .o-question-actions,
  .oci-direction .o-result-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .oci-direction .o-question-actions .o-resource-button,
  .oci-direction .o-result-actions .o-resource-button,
  .oci-direction #o-assessment-start { width: 100%; }
  .oci-direction .o-answer-option { padding: 16px; gap: 12px; }
  .oci-direction .o-result-answers li { flex-direction: column; gap: 14px; }
  .oci-direction .o-result-answers button { align-self: flex-start; }
  .oci-direction .o-result-next { padding: 20px; }
  .oci-direction .o-toolkit-edition { padding: 24px; }
  .header-inner nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .header-inner nav a { overflow-wrap: anywhere; }
  .topic-nav a { flex: 1 1 140px; }
  .integration-header nav { gap: 4px 20px; }
  .integration-footer { gap: 8px 20px; }
}

@media (max-width: 360px) {
  .oci-direction .o-rank-list li {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .oci-direction .o-rank-list li > div { align-self: flex-end; }
  .oci-direction .o-resource-head h1 { font-size: 2.25rem; }
  .oci-direction .o-toolkit-edition h2 { font-size: 2.1rem; }
}