/* Stage 10 — mobile resilience and accessibility safeguards. */

html,
body {
  max-width: 100%;
}

body {
  overflow-x: hidden;
}

@supports (overflow: clip) {
  body {
    overflow-x: clip;
  }
}

:where(
  .home-layout,
  .home-main,
  .home-hero,
  .home-hero > *,
  .wiki-layout,
  .wiki-layout > *,
  .article-card,
  .article-body,
  .article-body > *,
  .card-grid > *,
  .directory-grid > *,
  .journey-grid > *,
  .contact-grid > *,
  .related-grid > *,
  .article-card-list > *,
  .metric-grid > *,
  .contact-detail-grid > *,
  .role-split > *,
  .release-entry > *,
  .search-dialog__surface,
  .search-result,
  .search-result > *
) {
  min-width: 0;
}

:where(h1, h2, h3, p, li, dd, figcaption, .page-lead, .search-result__summary) {
  overflow-wrap: break-word;
}

:where(a, code, kbd, samp, .code-example, .command-block pre) {
  overflow-wrap: anywhere;
}

:where(a, button, summary, input, select, textarea) {
  touch-action: manipulation;
}

/* The form itself provides the visible ring, avoiding a doubled input ring. */
.search-field:focus-visible {
  outline: 0;
  box-shadow: none;
}

.search-result {
  min-height: var(--target-min);
}

.table-wrap {
  max-width: 100%;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--color-blue-500) var(--color-blue-50);
  scrollbar-gutter: stable both-edges;
}

.table-wrap[data-scrollable="true"] {
  background:
    linear-gradient(90deg, var(--color-paper) 30%, transparent) left center / 2.5rem 100% no-repeat local,
    linear-gradient(270deg, var(--color-paper) 30%, transparent) right center / 2.5rem 100% no-repeat local,
    linear-gradient(90deg, color-mix(in srgb, var(--color-navy-950) 16%, transparent), transparent) left center / 0.75rem 100% no-repeat scroll,
    linear-gradient(270deg, color-mix(in srgb, var(--color-navy-950) 16%, transparent), transparent) right center / 0.75rem 100% no-repeat scroll,
    var(--color-paper);
}

.table-wrap[data-scrollable="true"]:focus-visible {
  outline: var(--focus-width) solid var(--color-blue-500);
  outline-offset: var(--space-1);
  box-shadow: none;
}

/* Modern mobile viewport units avoid jumps behind browser toolbars. */
@supports (height: 100dvh) {
  .site-sidebar,
  .article-rail {
    max-height: calc(100dvh - var(--header-height) - var(--space-12));
  }

  .search-dialog__surface {
    max-height: calc(100dvh - var(--header-height) - var(--space-12));
  }

  .mobile-drawer {
    max-height: calc(100dvh - var(--header-height));
  }
}

@supports (padding: max(0px)) {
  .site-header__inner {
    padding-left: max(var(--page-gutter), env(safe-area-inset-left));
    padding-right: max(var(--page-gutter), env(safe-area-inset-right));
  }

  .mobile-drawer > .site-nav {
    padding-bottom: max(var(--space-8), env(safe-area-inset-bottom));
  }

  .search-dialog__surface {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (pointer: coarse) {
  :where(
    .article-toc__link,
    .breadcrumbs__link,
    .external-link,
    .text-link,
    .card-link,
    .site-footer__nav a
  ) {
    min-height: var(--target-min);
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 44.999rem) {
  .search-dialog {
    padding-bottom: 0;
  }

  .search-dialog__surface {
    max-height: calc(100vh - var(--header-height));
    min-height: calc(100vh - var(--header-height));
  }

  @supports (height: 100dvh) {
    .search-dialog__surface {
      max-height: calc(100dvh - var(--header-height));
      min-height: calc(100dvh - var(--header-height));
    }
  }

  .search-dialog .search-results {
    padding-inline: var(--space-3);
  }

  .search-result {
    padding-inline: var(--space-3);
  }

  .table-wrap {
    margin-inline: calc(var(--space-1) * -1);
  }

  .code-example {
    white-space: normal;
  }
}

@media (max-width: 24.999rem) {
  .article-card {
    padding-inline: var(--space-3);
  }

  .home-hero {
    padding-inline: var(--space-4);
  }

  .search-dialog__heading,
  .search-form {
    margin-inline: 0;
  }

  .search-dialog__heading {
    padding-inline: var(--space-3);
  }

  .search-form {
    margin-inline: var(--space-3);
    padding-inline: var(--space-3);
  }

  .search-field {
    font-size: var(--font-size-base);
  }
}

@media (max-height: 35rem) {
  .search-dialog {
    padding-top: var(--space-2);
  }

  .search-dialog__surface {
    max-height: calc(100vh - var(--space-4));
  }

  @supports (height: 100dvh) {
    .search-dialog__surface {
      max-height: calc(100dvh - var(--space-4));
    }
  }

  .search-dialog__heading {
    padding-block: var(--space-3) var(--space-2);
  }

  .search-dialog__heading p {
    display: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --color-muted: #34455f;
    --color-line: #8293aa;
    --color-blue-700: #0848a6;
    --focus-ring: 0 0 0 var(--focus-width) #005fcc;
  }

  .button,
  .icon-button,
  .card,
  .article-card,
  .table-wrap,
  .search-dialog__surface {
    border-width: 2px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header,
  .search-dialog__backdrop,
  .drawer-backdrop {
    backdrop-filter: none;
  }

  .site-header {
    background: var(--color-paper);
  }

  .search-dialog__backdrop,
  .drawer-backdrop {
    background: var(--color-navy-950);
  }
}

@media (forced-colors: active) {
  :focus-visible,
  .search-form:focus-within,
  .table-wrap[data-scrollable="true"]:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 3px;
    box-shadow: none;
  }

  .search-results [role="option"][aria-selected="true"],
  .article-toc__link[aria-current="location"] {
    border-left: 3px solid Highlight;
    box-shadow: none;
  }

  .table-wrap[data-scrollable="true"] {
    background: Canvas;
  }
}