/* OrionOS control integrity contract
   ---------------------------------
   Loaded last by every public OrionOS document. Keep human-readable control
   labels centered and allow wrapping only between words. This file is
   intentionally small and presentation-only so it can protect the main app,
   public pages, and standalone portals without changing their workflows. */

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  a.btn,
  [role="button"]
) {
  max-inline-size: 100%;
  text-align: center !important;
  text-align-last: center;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

/* Audited data-table controls are full touch targets, not twelve-pixel links. */
html body #app.app-shell .commission-audit-sort {
  display: inline-flex !important;
  min-block-size: 44px !important;
  align-items: center !important;
  padding-block: 8px !important;
}

/* Owner and engineering command cards expand with their full content. */
html body #app.app-shell .main:is([data-view="command"], [data-view="backend"], [data-view="enterprise"], [data-view="settings"]) :is(
  .command-card,
  .enterprise-control-card,
  .owner-admin-task-card,
  .owner-product-command-card,
  .owner-report-type-card
) {
  block-size: auto !important;
  max-block-size: none !important;
  overflow: visible !important;
  align-content: start !important;
}

html body #app.app-shell .main :is(.grid, .metric-grid, .overview-grid, .scorecard-grid) > * {
  min-inline-size: 0;
}

:where(
  button,
  a.btn,
  [role="button"]
) :where(span, strong, small, b, em) {
  max-inline-size: 100%;
  text-align: center;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

:where(.btn, a.btn) {
  min-inline-size: min-content;
  block-size: auto;
  align-items: center !important;
  justify-content: center !important;
  white-space: normal !important;
}

/* Guided product stages are navigation cards, not one-line tabs. Product and
   specialty names can leave each stage with less than 270px, so the supporting
   sentence must be allowed to wrap and the card must grow with it. */
html body #app.app-shell .main .guided-product-stage-nav > button {
  block-size: auto !important;
  min-block-size: 62px !important;
  max-block-size: none !important;
  overflow: visible !important;
}

html body #app.app-shell .main .guided-product-stage-nav > button > :where(strong, small) {
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

/* Product checkout text integrity guard.
   This stylesheet loads after the storefront theme, so human-facing copy
   always wraps between complete words and its boxes grow with the content. */
.purchase-shell :where(
  h1,
  h2,
  h3,
  p,
  li,
  strong,
  small,
  .eyebrow,
  .pilot-badge,
  .btn,
  .purchase-nav a,
  .role-tabs button,
  .role-tabs a,
  .checkout-example span
) {
  max-block-size: none !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

.purchase-shell :where(.btn, .purchase-nav a, .role-tabs button, .role-tabs a) {
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  block-size: auto !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}

.purchase-shell .hero-copy h1 {
  line-height: 1.18 !important;
}

.purchase-shell :where(.section-head h2, .checkout-panel h2, .product-title h3, .buyer-card h3) {
  line-height: 1.24 !important;
}

.purchase-shell :where(.product-price strong, .brand-lockup strong) {
  line-height: 1.18 !important;
}

:where(
  .pill,
  .status-pill,
  .badge,
  .chip,
  .asset-chip,
  .tier-badge,
  .pilot-badge
) {
  min-inline-size: min-content !important;
  max-inline-size: 100%;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-align-last: center;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

/* Compact summary badges may wrap at a space, but Safari must never compress
   them below their longest whole word. */
:where(summary) > :where(
  .pill,
  .status-pill,
  .badge,
  .chip
) {
  flex: 0 0 auto;
  justify-self: center;
}

/* Storefront tier selectors are real action buttons, not left-aligned cards. */
.role-tabs :where(button, a) {
  align-content: center;
  justify-items: center !important;
  text-align: center !important;
}

/* Finance category selectors are simple label buttons. Their workspace flex
   rule previously pinned the label to the left even when text-align was
   centered. */
html body #app.app-shell .enterprise-workspace-owned-button {
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
}

@media (max-width: 520px) {
  /* Give action labels vertical room when a complete phrase needs two lines. */
  :where(.toolbar, .row-actions, .split-actions, .checkout-buttons) :where(.btn, a.btn) {
    min-block-size: 42px;
    padding-block: 8px;
  }

  /* The camera row uses a useful three-part desktop layout. On a phone that
     layout left too little room for the camera name and clipped it. Stack the
     complete control and center each part instead. */
  html body #app.app-shell .main[data-view="camera_network"] .camera-network-row-main {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    align-self: start !important;
    min-block-size: max-content !important;
    block-size: max-content !important;
    overflow: visible !important;
    gap: 8px !important;
    padding-block: 8px !important;
  }

  html body #app.app-shell .main[data-view="camera_network"] .camera-network-row-main > :where(span, strong, small),
  html body #app.app-shell .main[data-view="camera_network"] .camera-network-row-preview {
    width: 100%;
    text-align: center !important;
  }

  html body #app.app-shell .main[data-view="camera_network"] .camera-network-row-preview {
    max-width: 160px;
  }

  html body #app.app-shell .main[data-view="camera_network"] .camera-network-rank {
    min-width: min(100%, 96px);
  }

  /* Broker CRM parity tiles previously kept three columns at phone width,
     leaving only ~80px for currency and LMS labels. Two equal columns retain
     the dashboard scan pattern while giving every complete label room. */
  html body #app.app-shell .main[data-view="crm"] .broker-agent-parity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body #app.app-shell .main[data-view="crm"] .broker-agent-parity-grid > button {
    min-width: 0 !important;
    min-height: 108px !important;
    padding-inline: 8px !important;
    align-content: center !important;
    justify-items: center !important;
    overflow: visible !important;
  }

  html body #app.app-shell .main[data-view="crm"] .broker-agent-parity-grid > button > :where(span, strong, small) {
    max-width: 100%;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  /* Team cards are full-card buttons. At 320px the member name and status no
     longer fit on one flex row, so stack that heading and let the card height
     follow its complete contact summary. */
  html body #app.app-shell .main[data-view="settings"] .team-directory-card {
    block-size: auto !important;
    min-block-size: max-content !important;
    max-block-size: none !important;
    overflow: visible !important;
  }

  html body #app.app-shell .main[data-view="settings"] .team-directory-card .module-title {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    inline-size: 100% !important;
    min-inline-size: 0 !important;
  }
}
/* Keyboard users must be able to bypass repeated navigation on every public
   and authenticated OrionOS document. */
.skip-link {
  position: fixed !important;
  inset-block-start: 8px !important;
  inset-inline-start: 8px !important;
  z-index: 2147483647 !important;
  display: inline-flex !important;
  min-block-size: 44px !important;
  align-items: center !important;
  padding: 10px 14px !important;
  border: 2px solid #b9efff !important;
  border-radius: 8px !important;
  background: #041a32 !important;
  color: #ffffff !important;
  font: 800 14px/1.2 Inter, system-ui, sans-serif !important;
  text-decoration: none !important;
  transform: translateY(-160%) !important;
}

.skip-link:focus,
.skip-link:focus-visible {
  outline: 3px solid #ffffff !important;
  outline-offset: 2px !important;
  transform: translateY(0) !important;
}

/* Customer cleanup rules use larger desktop card minimums. At phone width
   those minimums must not override the base one-column enterprise layout. */
@media (max-width: 760px) {
  /* On compact screens confirmations become a bottom snackbar. This is a CSS
     safety net for resize/orientation transitions while the JS anchor is being
     remeasured, and it cannot preserve a stale desktop coordinate off-screen. */
  html body > .toast.contextual-toast {
    position: fixed !important;
    inset: auto 14px calc(14px + env(safe-area-inset-bottom)) !important;
    inline-size: auto !important;
    max-inline-size: calc(100vw - 28px) !important;
  }

  /* Keep the horizontal role rail as a nested scroll region. Safari otherwise
     includes the max-content rail in the document scrolling area even when
     the sidebar itself declares overflow-x:auto, allowing the whole portal to
     pan hundreds of pixels away from its content. */
  html body #app.app-shell :is(.customer-shell, .internal-shell) > .sidebar {
    max-inline-size: 100% !important;
    overflow-x: hidden !important;
  }

  html body #app.app-shell :is(.customer-shell, .internal-shell) > .sidebar > .nav-list {
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  html body #app.app-shell .main .enterprise-home {
    grid-template-columns: minmax(0, 1fr) !important;
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
  }

  html body #app.app-shell .main .enterprise-home > * {
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
  }
}

/* Portal viewport anchor contract.
   Safari can preserve a document-level horizontal offset after a window resize,
   zoom change, orientation change, or restored session. That moves the complete
   left edge of the desktop navigation outside the visible viewport. The page
   itself must remain anchored; only explicit nested rails and tables may pan. */
html:has(body > #app.app-shell),
body:has(> #app.app-shell) {
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  overflow-x: hidden !important;
  overscroll-behavior-inline: none;
}

html body > #app.app-shell,
html body > #app.app-shell > .shell-grid {
  box-sizing: border-box !important;
  inline-size: 100% !important;
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  margin-inline: 0 !important;
  transform: none !important;
}

html body > #app.app-shell > .shell-grid > .sidebar {
  box-sizing: border-box !important;
  inset-inline-start: 0 !important;
  inline-size: 100% !important;
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  margin-inline-start: 0 !important;
  transform: none !important;
}

html body > #app.app-shell > .shell-grid > .sidebar > .nav-list,
html body > #app.app-shell > .shell-grid > .sidebar :is(
  .sidebar-priority-nav,
  .role-primary-navigation,
  .role-more-navigation,
  .nav-group,
  .nav-group-items
) {
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  margin-inline-start: 0 !important;
  transform: none !important;
}

@media (min-width: 761px) {
  html body > #app.app-shell > .shell-grid > .sidebar {
    overflow-x: hidden !important;
    padding-inline-start: max(12px, env(safe-area-inset-left)) !important;
  }

  html body > #app.app-shell > .shell-grid > .sidebar :is(
    .nav-list,
    .nav-group-toggle,
    .nav-button,
    .role-more-navigation-summary
  ) {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
  }
}

@media (max-width: 760px) {
  html body > #app.app-shell > .shell-grid > .sidebar {
    inset-inline: 0 !important;
    padding-inline-start: max(10px, env(safe-area-inset-left)) !important;
    padding-inline-end: max(10px, env(safe-area-inset-right)) !important;
  }

  /* The role rail remains the sole horizontal scroller on compact screens. */
  html body > #app.app-shell > .shell-grid > .sidebar > .nav-list {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: max(10px, env(safe-area-inset-left)) !important;
  }
}