.orion-product-switcher {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  max-width: min(100%, 720px);
  padding: 5px;
  border: 1px solid rgba(112, 194, 255, .22);
  border-radius: 12px;
  background: rgba(2, 20, 43, .72);
  box-shadow: inset 0 1px rgba(255, 255, 255, .05);
}

.orion-product-switcher :is(a, .active, .context) {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 8px;
  color: #c8def0;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-decoration: none;
}

.orion-product-switcher a:hover,
.orion-product-switcher a:focus-visible {
  background: rgba(53, 160, 244, .16);
  color: #fff;
  outline: 2px solid rgba(92, 194, 255, .38);
  outline-offset: 1px;
}

.orion-product-switcher .active {
  background: linear-gradient(135deg, #167ac1, #0f558d);
  color: #fff;
  box-shadow: 0 5px 18px rgba(0, 88, 155, .24);
}

.orion-product-switcher .context {
  max-width: 240px;
  overflow: hidden;
  background: rgba(28, 76, 113, .46);
  color: #91dcff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orion-workspace-context {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  border: 1px solid rgba(72, 171, 238, .24);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(13, 62, 102, .72), rgba(4, 25, 49, .78));
  box-shadow: 0 16px 38px rgba(0, 7, 20, .2), inset 0 1px rgba(255, 255, 255, .05);
}

.orion-workspace-context h3 { margin: 4px 0 6px; color: #f5fbff; }
.orion-workspace-context p { max-width: 850px; margin: 0; color: #b8d4e9; line-height: 1.55; }
.orion-workspace-context-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

.orion-connection-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.orion-connection-grid article {
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(93, 174, 226, .18);
  border-radius: 13px;
  background: rgba(4, 29, 55, .68);
}

.orion-connection-grid article :is(strong, small) { display: block; }
.orion-connection-grid article strong { margin-top: 12px; color: #f2f9ff; font-size: 13px; }
.orion-connection-grid article small { margin-top: 5px; color: #a9c4d9; font-size: 12px; line-height: 1.5; }

.freightflow-native-status {
  border-color: rgba(49, 196, 141, .42);
  background: linear-gradient(135deg, rgba(12, 75, 68, .78), rgba(4, 34, 55, .9));
}

.freightflow-native-status strong {
  color: #f3fff9;
}

.freightflow-native-status .help {
  color: #c4e9dc;
}

.freightflow-native-board,
.freightflow-native-command {
  min-width: 0;
}

.freightflow-native-board .tms-board-upgrade,
.freightflow-native-command .tms-load-command-sheet,
.freightflow-native-secondary > :is(section, article) {
  margin: 0;
}

.freightflow-native-empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
}

.freightflow-native-empty h3,
.freightflow-native-tools h3 {
  margin: 5px 0 8px;
}

.freightflow-native-empty p {
  max-width: 780px;
  margin: 0;
}

.freightflow-native-tools .polished-gap-grid > button {
  min-width: 0;
  min-height: 112px;
  text-align: left;
}

.freightflow-native-tools .polished-gap-grid > button :is(span, strong, small) {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .orion-connection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orion-workspace-context { grid-template-columns: 1fr; }
  .orion-workspace-context-actions { justify-content: flex-start; }
  .freightflow-native-empty { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .orion-product-switcher { width: 100%; }
  .orion-product-switcher :is(a, .active, .context) { min-height: 44px; }
  .orion-product-switcher .context { order: -1; max-width: 100%; width: 100%; }
  .orion-connection-grid { grid-template-columns: 1fr; }
  .orion-workspace-context { padding: 16px; }
  .orion-workspace-context-actions .btn { width: 100%; min-height: 44px; justify-content: center; }
  .freightflow-native-empty .row-actions,
  .freightflow-native-empty .row-actions .btn {
    width: 100%;
  }
}

/* OrionOS nested-layout collision guard v20260723-1.
   Workspace cards can be much narrower than the browser viewport, so their
   responsive behavior must follow the card width instead of viewport width. */
#app.app-shell .main :is(
  .card,
  .module-card,
  .enterprise-module-card,
  .enterprise-workspace-card,
  .enterprise-action-card,
  .enterprise-focus-card,
  .manager-training-panel,
  .portal-command-surface,
  .product-surface
) {
  container-type: inline-size;
}

#app.app-shell .main .lms-assignment-course-picker {
  container: orion-lms-assignment / inline-size;
}

#app.app-shell .main :is(
  .grid,
  .form-grid,
  .split-actions,
  .row-actions,
  .status-strip,
  .toolbar,
  .module-title,
  .course-row,
  .lms-assignment-picker-layout,
  .lms-assignment-picker-actions,
  .lms-assignment-picker-pager
) > * {
  min-inline-size: 0 !important;
  max-inline-size: 100%;
}

#app.app-shell .main :is(
  .split-actions,
  .row-actions,
  .status-strip,
  .toolbar,
  .module-title,
  .lms-assignment-picker-heading,
  .lms-assignment-picker-actions,
  .lms-assignment-picker-pager
) {
  min-inline-size: 0;
  max-inline-size: 100%;
  flex-wrap: wrap !important;
}

#app.app-shell .main :is(
  h1,
  h2,
  h3,
  h4,
  p,
  small,
  strong,
  label,
  li,
  dt,
  dd,
  summary,
  .help,
  .pill,
  .status-pill,
  .choice-pill,
  .nav-label
) {
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

#app.app-shell .main :is(button, .btn, a.btn) {
  max-inline-size: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

#app.app-shell .main .lms-assignment-picker-layout > section,
#app.app-shell .main .lms-assignment-picker-results,
#app.app-shell .main .lms-assignment-selected-tray,
#app.app-shell .main .lms-assignment-picker-actions,
#app.app-shell .main .lms-assignment-picker-pager {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
}

/* These forms can themselves be narrow cards. Reset global span classes so
   they never manufacture implicit grid columns outside the card. */
#app.app-shell .main .legal-hold-release-form {
  grid-template-columns: minmax(0, 1fr) !important;
}

#app.app-shell .main .legal-hold-release-form > :is(
  .span-2,
  .span-3,
  .span-4
) {
  grid-column: 1 / -1 !important;
}

#app.app-shell .main #passwordChangeForm {
  grid-template-columns: minmax(0, 1fr) !important;
}

#app.app-shell .main #passwordChangeForm > :is(
  .span-2,
  .span-3,
  .span-4
) {
  grid-column: 1 / -1 !important;
}

#app.app-shell .main #passwordChangeForm > .btn {
  inline-size: 100%;
}

/* Action cards are buttons, so some engines inherit control clipping even
   when the surrounding CSS allows the card to grow with its copy. */
#app.app-shell .main button.module-action-card {
  block-size: auto !important;
  min-block-size: 124px;
  overflow: visible;
  align-content: start;
}

#app.app-shell .main button.module-action-card > * {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

#app.app-shell .main :is(
  .focused-workspace-drawer,
  .focused-workspace-inline-drawer,
  .focused-form-options
) > summary small {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow: visible !important;
  overflow-wrap: anywhere;
  text-overflow: clip !important;
  white-space: normal !important;
}

#app.app-shell .main details > summary small {
  block-size: auto !important;
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  overflow: visible !important;
  overflow-wrap: anywhere;
  text-overflow: clip !important;
  white-space: normal !important;
}

#app.app-shell .main .status-strip > :is(.pill, .status-pill) {
  inline-size: auto;
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  overflow-wrap: anywhere;
}

#app.app-shell .main .lead-scout-saved-search-form > .btn[type="submit"] {
  min-inline-size: max-content !important;
  block-size: auto !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

/* OrionOS command-metric alignment lock v20260805-1.
   Owner and Engineering retain a wider sidebar at tablet widths, so their
   usable command rail reaches the two-column breakpoint before the viewport
   itself looks mobile. Let every metric grow with its copy; the decorative
   ring remains clipped by the card while the text does not. */
#app.app-shell .main[data-view="command"] .customer-command-metric-grid > .customer-command-metric {
  block-size: auto !important;
  min-block-size: 120px;
  max-block-size: none !important;
}

#app.app-shell .main[data-view="command"] .customer-command-metric-grid > .customer-command-metric > :is(span, strong, small) {
  min-inline-size: 0;
  max-inline-size: 100%;
  max-block-size: none !important;
  overflow: visible !important;
  overflow-wrap: break-word;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: normal;
}

@media (max-width: 1180px) {
  #app.app-shell .main[data-view="command"] .customer-command-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  #app.app-shell .main[data-view="command"] .customer-command-metric-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* OrionOS shared action-card content-fit lock v20260805-2.
   These cards are reused by Settings and operational workspaces. Their
   content must determine the card height when a tablet-width column wraps. */
#app.app-shell .polished-gap-grid > button {
  height: auto !important;
  min-height: 124px !important;
  max-height: none !important;
  align-content: start !important;
  grid-auto-rows: max-content;
  overflow: visible !important;
}

#app.app-shell .polished-gap-grid > button :is(span, strong, small) {
  display: block;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: normal;
  overflow-wrap: anywhere;
  text-overflow: clip !important;
}

#app.app-shell .main .ohm-tabs {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

#app.app-shell .main .ohm-tabs > .ohm-tab {
  flex: 0 0 auto !important;
  inline-size: auto !important;
  min-inline-size: max-content !important;
  max-inline-size: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

#app.app-shell .main .portal-command-action-overflow {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

#app.app-shell .main .portal-command-action-overflow > :is(button, .btn) {
  flex: 0 0 auto !important;
  inline-size: auto !important;
  min-inline-size: max-content !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

#app.app-shell .main .owner-admin-task-card .row-actions > .btn {
  flex: 1 1 100% !important;
  inline-size: 100% !important;
  min-inline-size: 0 !important;
}

@container orion-lms-assignment (max-width: 700px) {
  #app.app-shell .main .lms-assignment-picker-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #app.app-shell .main .lms-assignment-selected-tray {
    max-block-size: 260px;
  }
}

@container orion-lms-assignment (max-width: 470px) {
  #app.app-shell .main :is(
    .lms-assignment-picker-heading,
    .lms-assignment-picker-actions,
    .lms-assignment-picker-pager
  ) {
    align-items: stretch;
    flex-direction: column;
  }

  #app.app-shell .main :is(
    .lms-assignment-picker-actions,
    .lms-assignment-picker-pager
  ) > .row-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    inline-size: 100%;
  }

  #app.app-shell .main :is(
    .lms-assignment-picker-actions,
    .lms-assignment-picker-pager
  ) > .row-actions > :is(button, .btn) {
    inline-size: 100%;
  }
}

@container (max-width: 640px) {
  #app.app-shell .main :is(
    .grid.two,
    .grid.three,
    .grid.four,
    .enterprise-home,
    .enterprise-workspace-grid,
    .enterprise-module-grid,
    .customer-capability-grid,
    .orion-connection-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #app.app-shell .main .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #app.app-shell .main .form-grid > :is(.span-3, .span-4) {
    grid-column: 1 / -1 !important;
  }
}

@container (max-width: 420px) {
  #app.app-shell .main .form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #app.app-shell .main .form-grid > :is(.span-2, .span-3, .span-4) {
    grid-column: 1 / -1 !important;
  }

  #app.app-shell .main :is(.split-actions, .toolbar) {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 820px) {
  #app.app-shell .main[data-orion-ui-audit="true"] :is(.row-actions, .toolbar) {
    flex-wrap: nowrap !important;
  }

  #app.app-shell .main[data-orion-ui-audit="true"] .row-actions > :is(button, .btn, a.btn) {
    block-size: auto !important;
    min-block-size: 40px !important;
    overflow: visible !important;
    white-space: normal !important;
  }
}