/* Cross-portal text reflow, focus visibility, and pointer accuracy. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-wrap: break-word; }
body :where(main,.main,.card,.panel,.modal,.modal-body,.row,.form-grid,.table-wrap) { min-width: 0; }
body :where(main,.main) :where(p,li,dd,dt,.help,.small,.muted,figcaption) { max-width: 78ch; line-height: 1.5; }
body :where(button,a,input,select,textarea,summary,[role="button"],[role="tab"]):focus-visible {
  outline: 3px solid #71d7ff !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(3,23,45,.88) !important;
}
body :where(button,.btn,a.btn,.nav,.nav-item,[role="button"],[role="tab"],summary) { touch-action: manipulation; }
body :where(input,select,textarea) { max-width: 100%; font-size: max(16px, 1em); }
body :where(.table-wrap,.table-scroll) { overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
body :where(.pill,.status-pill,.badge,.chip) { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

@media (pointer: coarse) {
  body :where(button,.btn,a.btn,.nav,.nav-item,[role="button"],[role="tab"],summary,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),select,textarea) { min-width: 44px; min-height: 44px !important; }
  body :where(input[type="checkbox"],input[type="radio"]) { width: 24px; height: 24px; }
}

@media (forced-colors: active) {
  body :where(button,.btn,a.btn,input,select,textarea,.card,.panel,.pill,.status-pill) { border: 1px solid CanvasText; }
  body :where(button,a,input,select,textarea,summary,[role="button"]):focus-visible { outline-color: Highlight !important; box-shadow: none !important; }
}

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

@media (max-width: 760px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  :is(
    button,
    .btn,
    .btn-ghost,
    .menu-btn,
    a.nav,
    .nav-item,
    .orion-role-workflow-item,
    .loc,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
    select,
    textarea
  ) {
    min-height: 44px !important;
  }

  body.orion-brand-ready input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  body.orion-brand-ready select,
  body.orion-brand-ready textarea {
    min-height: 44px !important;
    min-block-size: 44px !important;
  }

  .maplibregl-ctrl button {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  body[data-orion-mobile-portal] {
    box-sizing: border-box;
    min-height: 100dvh;
    padding-top: max(74px, calc(env(safe-area-inset-top) + 66px)) !important;
  }

  body[data-orion-mobile-portal] > .orion-mobile-section-navigation {
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    left: max(8px, env(safe-area-inset-left));
    width: auto;
  }

  /* The Agent portal used to turn its complete feature tree into a tall,
     horizontally scrolling tab rail. On a phone that rail could occupy the
     viewport and make the actual portal look missing. The compact selector
     above now owns mobile navigation while main remains the primary surface. */
  body[data-orion-mobile-portal="agent"] #app.app.active {
    display: block !important;
    min-height: calc(100dvh - 74px) !important;
  }

  body[data-orion-mobile-portal="agent"] #app.app.active > .sidebar {
    display: none !important;
  }

  body[data-orion-mobile-portal="agent"] #app.app.active > .main {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: calc(100dvh - 74px) !important;
    padding: 12px !important;
    overflow: visible !important;
  }

  body[data-orion-mobile-portal="admin"] #app.app.show {
    height: auto !important;
    min-height: calc(100dvh - 74px) !important;
  }

  body[data-orion-mobile-portal="admin"] #app.app.show > .main {
    min-width: 0 !important;
    min-height: calc(100dvh - 74px) !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  body[data-orion-mobile-portal="carrier"] #appView:not(.hidden) > .app > .main,
  body[data-orion-mobile-portal="shipper"] #appView:not(.hidden) > .app > .main,
  body[data-orion-mobile-portal="driver"] #app.app:not(.hidden) > .main {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: calc(100dvh - 74px) !important;
    overflow-x: hidden !important;
  }

  .orion-product-switcher a,
  .orion-product-switcher button,
  .orion-handoff-context a,
  .orion-handoff-context button {
    min-height: 44px;
  }

  .public .features {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 16px;
  }

  .picker-foot a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }

  :is(.modal-bg, .mb) {
    align-items: flex-end;
    padding:
      max(8px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
  }

  :is(.modal-bg, .mb) .modal {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 16px);
    border-radius: 14px 14px 8px 8px;
  }

  :is(.modal-head, .modal-h, .modal-body, .modal-b, .modal-foot, .modal-f) {
    min-width: 0;
    padding-inline: 14px;
  }

  :is(.modal-foot, .modal-f) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  :is(.modal-foot, .modal-f) > :is(button, .btn, a.btn) {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  .toast {
    right: 12px !important;
    bottom: max(84px, calc(env(safe-area-inset-bottom) + 72px)) !important;
    left: 12px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
  }

  body :where(main,.main) :where(.help,.small,.muted,figcaption) { font-size: max(12px, .78rem) !important; }
  body :where(.row-actions,.actions-row,.modal-foot,.modal-f,.panel-head) { min-width: 0; flex-wrap: wrap; }
}

@media (max-width: 430px) {
  :is(.modal-foot, .modal-f) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  :is(
    button,
    .btn,
    .btn-ghost,
    .menu-btn,
    a.nav,
    .nav-item,
    .orion-role-workflow-item,
    .loc,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
    select,
    textarea
  ) {
    min-height: 44px !important;
  }

  body.orion-brand-ready input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  body.orion-brand-ready select,
  body.orion-brand-ready textarea {
    min-height: 44px !important;
    min-block-size: 44px !important;
  }

  .maplibregl-ctrl button {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .picker-foot a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }

  body.orion-brand-ready input.orion-role-workflow-search:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]) {
    height: auto !important;
    min-height: 44px !important;
    min-block-size: 44px !important;
  }
}