/* Phase 154: small, app-wide accessibility and responsive safeguards. */
:root { --cbs-focus-ring: #0891b2; }

body :where(button, [role="button"], a, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--cbs-focus-ring);
  outline-offset: 2px;
}

body.dark :where(button, [role="button"], a, input, textarea, select, [tabindex]):focus-visible {
  --cbs-focus-ring: #67e8f9;
}

:where(input, textarea, select) { min-width: 0; max-width: 100%; }
:where(img, video, canvas) { max-width: 100%; }

.modal-root .modal,
#modal-root .modal,
[role="dialog"] {
  max-height: min(88dvh, 900px);
  overscroll-behavior: contain;
}

.modal-root .modal-body,
#modal-root .modal-body,
[role="dialog"] .modal-body {
  min-width: 0;
  overflow-wrap: anywhere;
}

#project-nav .tab-group-tabs,
.specialty-subnav,
.specialty-tabs {
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
}

@media (max-width: 760px) {
  .modal-root .modal,
  #modal-root .modal,
  [role="dialog"] {
    width: min(calc(100vw - 20px), 680px);
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }

  .modal-root .modal-actions,
  #modal-root .modal-actions,
  [role="dialog"] .modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .modal-root .modal-actions > button,
  #modal-root .modal-actions > button,
  [role="dialog"] .modal-actions > button {
    min-height: 42px;
  }

  #project-nav .tab-group-tabs,
  .specialty-subnav,
  .specialty-tabs {
    scroll-snap-type: x proximity;
  }

  #project-nav .tab,
  .specialty-subnav > button,
  .specialty-tabs > button {
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}