/* Acatian mobile authority
   Loaded last so one responsive contract wins over historical component rules. */

@media (max-width: 760px) {
  :root {
    --ax-mobile-gutter: 16px;
    --ax-mobile-radius: 12px;
    --ax-mobile-navy: #071d33;
    --ax-mobile-blue: #234fc8;
    --ax-mobile-paper: #f4f7fb;
    --ax-mobile-line: #c7d2df;
    --ax-mobile-muted: #4b6074;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    text-size-adjust: 100% !important;
    -webkit-text-size-adjust: 100% !important;
  }

  :where(button, a, input, select, textarea, summary) {
    min-width: 0;
  }

  :where(button, a, summary) {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* Public site */
  body.locked .public-scroll {
    width: 100% !important;
    padding-top: 0 !important;
    overflow-x: hidden !important;
  }

  body.locked .public-nav {
    min-height: 64px !important;
    height: 64px !important;
    padding: max(8px, env(safe-area-inset-top)) var(--ax-mobile-gutter) 8px !important;
    gap: 10px !important;
  }

  body.locked .public-nav > .public-brand {
    min-width: 0 !important;
    min-height: 40px !important;
    gap: 9px !important;
  }

  body.locked .public-nav > .public-brand > .brand-mark-image {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }

  body.locked .public-nav > .public-brand > strong {
    height: 30px !important;
    font-size: 15px !important;
  }

  body.locked .public-nav nav {
    width: auto !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  body.locked .public-nav nav :where(.public-menu-toggle, .public-nav-login) {
    min-height: 42px !important;
    padding: 9px 12px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
  }

  body.locked .public-nav nav.is-open .public-nav-links {
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    width: min(344px, calc(100vw - (2 * var(--ax-mobile-gutter)))) !important;
    max-height: calc(100svh - 84px) !important;
    padding: 12px !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
  }

  body.locked .public-nav nav.is-open .public-nav-group {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    padding: 28px 0 6px !important;
  }

  body.locked .public-nav nav.is-open .public-nav-links a {
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
  }

  body.locked #publicHome .public-plant-hero {
    width: 100% !important;
    min-height: calc(100svh - 64px) !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  body.locked #publicHome .public-plant-hero-copy {
    width: 100% !important;
    padding: 54px var(--ax-mobile-gutter) 36px !important;
  }

  body.locked #publicHome .public-plant-hero h1 {
    max-width: 12ch !important;
    font-size: clamp(36px, 10.8vw, 44px) !important;
    line-height: 1.06 !important;
  }

  body.locked #publicHome .public-plant-hero-copy > p {
    max-width: 38ch !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  body.locked #publicHome .editorial-home > :where(section, footer),
  body.locked .public-section.public-page:not(#publicHome),
  body.locked .public-route-footer {
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  body.locked #publicHome .editorial-home > :where(section, footer):not(.public-plant-hero) {
    padding-right: var(--ax-mobile-gutter) !important;
    padding-left: var(--ax-mobile-gutter) !important;
  }

  body.locked .public-section.public-page:not(#publicHome),
  body.locked #loginPanel.public-login,
  body.locked #publicPricing.public-pricing,
  body.locked #publicPilot.public-pilot {
    padding: 14px var(--ax-mobile-gutter) 56px !important;
    gap: 24px !important;
  }

  body.locked .public-section.public-page:not(#publicHome) > .section-heading:first-child,
  body.locked .public-section.public-page:not(#publicHome) > .section-heading:first-of-type,
  body.locked #loginPanel > .access-heading:first-child {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 18px 0 24px !important;
    gap: 9px !important;
  }

  body.locked .public-section.public-page:not(#publicHome) > .section-heading:first-child > *,
  body.locked .public-section.public-page:not(#publicHome) > .section-heading:first-of-type > *,
  body.locked #loginPanel > .access-heading:first-child > * {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body.locked .public-section.public-page:not(#publicHome) > .section-heading :where(h1, h2),
  body.locked #loginPanel > .access-heading:first-child h1 {
    font-size: clamp(32px, 9vw, 40px) !important;
    line-height: 1.08 !important;
    overflow-wrap: break-word !important;
  }

  body.locked :where(.public-page-index, .intent-page-index, .technical-guide-toc, .homepage-chapter-nav) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 6px !important;
    gap: 4px !important;
    overflow: visible !important;
  }

  body.locked :where(.public-page-index, .intent-page-index, .technical-guide-toc, .homepage-chapter-nav) > strong {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.locked :where(.public-page-index, .intent-page-index, .technical-guide-toc, .homepage-chapter-nav) > a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 9px 10px !important;
    white-space: normal !important;
  }

  body.locked :where(
    .platform-grid,
    .workflow-rail,
    .ecosystem-grid,
    .public-example-grid,
    .migration-grid,
    .resource-downloads,
    .resource-guides,
    .legal-grid
  ) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 14px !important;
    overflow: visible !important;
  }

  body.locked :where(
    .platform-grid,
    .workflow-rail,
    .ecosystem-grid,
    .public-example-grid,
    .migration-grid,
    .resource-downloads,
    .resource-guides,
    .legal-grid
  ) > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body.locked .public-subpage-gallery,
  body.locked .public-subpage-gallery .public-photo-feature {
    width: 100% !important;
    min-height: 280px !important;
    height: auto !important;
  }

  body.locked .public-subpage-gallery .public-photo-feature img {
    min-height: 280px !important;
    object-fit: cover !important;
  }

  body.locked #publicHome .pilot-real-workspace {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.locked #publicHome .pilot-real-screen,
  body.locked #publicHome .pilot-real-screen-viewport {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
  }

  body.locked #publicHome .pilot-real-screen-stage {
    width: 620px !important;
    min-width: 620px !important;
  }

  /* Pricing becomes a readable vertical comparison instead of a clipped rail. */
  body.locked #publicPricing :where(.pricing-cost-summary, .pricing-billing-strip, .pricing-grid) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  html body.locked section#publicPricing div.pricing-cost-summary,
  html body.locked section#publicPricing div.pricing-billing-strip {
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow: visible !important;
  }

  body.locked #publicPricing :where(.pricing-cost-summary, .pricing-billing-strip) > span,
  body.locked #publicPricing .pricing-grid > article {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    transform: none !important;
  }

  body.locked #publicPricing .pricing-cost-summary > span {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 84px !important;
    padding: 16px !important;
  }

  body.locked #publicPricing .pricing-cost-summary > span small,
  body.locked #publicPricing .pricing-cost-summary > span b {
    grid-column: 1 !important;
  }

  body.locked #publicPricing .pricing-cost-summary > span strong {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
  }

  body.locked #publicPricing .pricing-private {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    padding: 26px 20px !important;
    gap: 24px !important;
  }

  body.locked #publicPricing .pricing-private-offer {
    padding: 22px 0 0 !important;
    border-top: 1px solid #38526b !important;
    border-left: 0 !important;
  }

  body.locked #publicPricing .pricing-faq {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* Login and trial checkout always use one explicit reading column. */
  body.locked #loginPanel .access-panel {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    gap: 16px !important;
    overflow: visible !important;
  }

  body.locked #loginPanel .access-card,
  body.locked #loginPanel .access-primary-card,
  body.locked #loginPanel .checkout-card {
    position: relative !important;
    inset: auto !important;
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 22px 18px !important;
    transform: none !important;
    overflow: visible !important;
  }

  body.locked #loginPanel .access-primary-card {
    order: 1 !important;
  }

  body.locked #loginPanel .checkout-card {
    order: 2 !important;
  }

  body.locked #loginPanel :where(input, select, textarea, button, .google-login-box) {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.locked #loginPanel :where(.login-button, .login-secondary-button, .google-login-fallback, .checkout-button),
  body.locked :where(.public-primary, .public-secondary, .pricing-plan-button) {
    min-height: 48px !important;
    white-space: normal !important;
  }

  /* Authenticated engineering workspace */
  body.authenticated .app-shell {
    display: block !important;
    width: 100% !important;
    min-height: 100svh !important;
    overflow: visible !important;
  }

  body.authenticated .sidebar {
    position: relative !important;
    z-index: 20 !important;
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px 10px 9px !important;
    gap: 6px !important;
    overflow: visible !important;
    border-right: 0 !important;
    border-bottom: 1px solid #29445f !important;
  }

  body.authenticated .sidebar .brand {
    min-height: 38px !important;
    margin: 0 !important;
    padding: 2px 5px !important;
  }

  body.authenticated .sidebar .brand .brand-mark-image {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
  }

  body.authenticated .sidebar .brand h1 {
    font-size: 14px !important;
  }

  body.authenticated .sidebar .brand p {
    display: none !important;
  }

  body.authenticated .suite-nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    padding: 0 !important;
    gap: 5px !important;
    overflow: visible !important;
  }

  body.authenticated .suite-nav-group {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  body.authenticated .suite-nav-group.is-current,
  body.authenticated .suite-nav-group[open] {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  body.authenticated .suite-nav-group:not(.is-current):not([open]) > summary {
    display: flex !important;
    min-height: 34px !important;
    padding: 6px 4px !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  body.authenticated .suite-nav-group:not(.is-current):not([open]) > summary > :where(span, small),
  body.authenticated .suite-nav-group:not(.is-current):not([open]) > summary::after {
    display: none !important;
  }

  body.authenticated .suite-nav-group:not(.is-current):not([open]) > summary strong {
    font-size: 10px !important;
  }

  body.authenticated .suite-nav-group.is-current > summary,
  body.authenticated .suite-nav-group[open] > summary {
    min-height: 42px !important;
    padding: 7px 10px !important;
  }

  body.authenticated .suite-nav-group.is-current > summary > small,
  body.authenticated .suite-nav-group[open] > summary > small {
    display: none !important;
  }

  body.authenticated .suite-nav-group.is-current > div,
  body.authenticated .suite-nav-group[open] > div {
    display: flex !important;
    width: 100% !important;
    padding: 4px !important;
    gap: 4px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: thin !important;
  }

  body.authenticated .suite-nav-group.is-current .suite-link,
  body.authenticated .suite-nav-group[open] .suite-link {
    flex: 0 0 auto !important;
    min-height: 34px !important;
    padding: 7px 10px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  body.authenticated .sidebar-model-controls {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 5px 0 0 !important;
    gap: 5px !important;
  }

  body.authenticated .sidebar-settings {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.authenticated .sidebar-settings > summary {
    min-height: 36px !important;
    padding: 6px 5px !important;
    place-content: center !important;
    text-align: center !important;
  }

  body.authenticated .sidebar-settings > summary strong {
    font-size: 10px !important;
  }

  body.authenticated .sidebar-settings > summary span {
    display: none !important;
  }

  body.authenticated .sidebar-settings[open] {
    grid-column: 1 / -1 !important;
  }

  body.authenticated .sidebar-settings[open] .sidebar-settings-body,
  body.authenticated .sidebar-settings[open] > .control-group {
    max-height: min(58svh, 520px) !important;
    overflow-y: auto !important;
  }

  body.authenticated .workspace {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 10px !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  body.authenticated .workspace > .topbar {
    order: 0 !important;
  }

  body.authenticated .workspace > .trial-status-banner,
  body.authenticated .workspace > #workflowGuide {
    order: 1 !important;
  }

  body.authenticated .workspace > .kpi-strip {
    order: 2 !important;
  }

  body.authenticated .workspace > .view {
    order: 3 !important;
  }

  body.authenticated .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 72px !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    gap: 10px !important;
    border-radius: var(--ax-mobile-radius) !important;
  }

  body.authenticated .topbar-main {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.authenticated .topbar .workspace-title-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  body.authenticated .topbar h2 {
    font-size: 22px !important;
    line-height: 1.15 !important;
  }

  body.authenticated .topbar .eyebrow {
    font-size: 10px !important;
  }

  body.authenticated .topbar .view-description {
    display: block !important;
    margin-top: 5px !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
  }

  body.authenticated .topbar .model-status {
    display: none !important;
  }

  body.authenticated .profile-menu {
    position: relative !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 72px !important;
    align-self: start !important;
  }

  body.authenticated .topbar .profile-button {
    display: flex !important;
    width: 72px !important;
    min-width: 72px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 21px !important;
  }

  body.authenticated .topbar .profile-button > strong {
    display: block !important;
    max-width: 58px !important;
    overflow: hidden !important;
    color: #ffffff !important;
    font-size: 10px !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.authenticated .topbar .profile-button > span {
    display: none !important;
  }

  body.authenticated .profile-panel {
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100svh - 24px) !important;
    overflow-y: auto !important;
  }

  body.authenticated .topbar > .actions {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 7px 0 1px !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: thin !important;
  }

  body.authenticated:not([data-active-view="flowsheet"]) .topbar > .actions {
    display: none !important;
  }

  body.authenticated .topbar > .actions :where(button, .action-button) {
    flex: 0 0 auto !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  body.authenticated #workflowGuide {
    width: 100% !important;
    margin: 0 !important;
  }

  body.authenticated .kpi-strip {
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0 4px !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: thin !important;
  }

  body.authenticated .kpi-strip article {
    flex: 0 0 148px !important;
    min-width: 148px !important;
    min-height: 78px !important;
    padding: 12px !important;
    scroll-snap-align: start !important;
  }

  body.authenticated .workspace > .view,
  body.authenticated .workspace > .view.active {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  /* Technical tables preserve columns inside explicit horizontal scroll areas. */
  body.authenticated :where(#equipmentView, #streamsView).data-view {
    max-height: min(74svh, 760px) !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
  }

  body.authenticated :where(#equipmentView, #streamsView).data-view table {
    width: max-content !important;
    min-width: 960px !important;
  }

  body.authenticated :where(#equipmentView, #streamsView).data-view thead {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
  }

  body.authenticated :where(#equipmentView, #streamsView).data-view th:first-child,
  body.authenticated :where(#equipmentView, #streamsView).data-view td:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 1 !important;
  }

  body.authenticated #equationsView .equation-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 8px !important;
  }

  body.authenticated #equationList {
    max-height: min(72svh, 720px) !important;
    padding-right: 4px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  body.authenticated #equationList .equation-card {
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px !important;
  }

  body.authenticated :where(.simulation-board, .modelling-board, .cfd-board, .ai-board, .standards-list, .sources-board, .recommendations-board, .validation-board, .twin-board, .lca-board, .reports-board) {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.authenticated :where(.simulation-board, .modelling-board, .cfd-board, .ai-board, .standards-list, .sources-board, .recommendations-board, .validation-board, .twin-board, .lca-board, .reports-board) :where(.workspace-primary-section, .workspace-disclosure, article, section) {
    max-width: 100% !important;
  }

  body.authenticated :where(.schedule-heatmap, .advanced-result-table, .reports-graph, .report-visual, .engineering-graphic, .download-visual) {
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
  }

  body.authenticated #reportsView svg {
    min-width: 920px !important;
    max-width: none !important;
  }

  body.authenticated #reportsView .export-canvas-scroll svg {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
  }

  body.authenticated .economics-tea-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 12px !important;
  }

  body.authenticated #economicsView :where(.cost-stack, .economic-notes, .lca-board) {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.authenticated #economicsView .cost-track {
    width: min(46vw, 170px) !important;
    max-width: 46vw !important;
  }

  /* Flowsheet keeps full engineering resolution inside a deliberate pan surface. */
  body.authenticated #flowsheetView .canvas-frame {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: var(--ax-mobile-radius) !important;
  }

  body.authenticated #flowsheetView .builder-library {
    order: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: 430px !important;
    overflow-y: auto !important;
  }

  body.authenticated #flowsheetView .library-panel {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  body.authenticated #flowsheetView :where(.library-controls, .library-search, .palette-groups, .section-builder, .palette) {
    position: static !important;
    inset: auto !important;
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  body.authenticated #flowsheetView :where(.library-controls, .section-builder, .palette) {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.authenticated #flowsheetView .palette {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  body.authenticated #flowsheetView .canvas-toolbar {
    order: 1 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  body.authenticated #flowsheetView .canvas-toolbar > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.authenticated #flowsheetView .canvas-mode-switch {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
  }

  body.authenticated #flowsheetView .canvas-guide {
    display: none !important;
  }

  body.authenticated #flowsheetView #modeHint {
    display: none !important;
  }

  body.authenticated #flowsheetView .canvas-health,
  body.authenticated #flowsheetView .canvas-workbench,
  body.authenticated #flowsheetView .canvas-options,
  body.authenticated #flowsheetView .equation-spotlight {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.authenticated #flowsheetView .flowsheet-canvas {
    order: 2 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: min(70svh, 700px) !important;
    min-height: 560px !important;
    max-height: 700px !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    touch-action: pan-x pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.authenticated #flowsheetView .canvas-stage {
    min-width: 1200px !important;
  }

  body.authenticated #flowsheetView .canvas-health { order: 3 !important; }
  body.authenticated #flowsheetView .canvas-workbench { order: 4 !important; }
  body.authenticated #flowsheetView .canvas-options { order: 5 !important; }
  body.authenticated #flowsheetView .equation-spotlight { order: 6 !important; }

  body.authenticated .detail-drawer {
    position: fixed !important;
    top: auto !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    left: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(72svh, 680px) !important;
    overflow-y: auto !important;
    border-radius: 14px !important;
  }

  body.authenticated .help-dock {
    right: 12px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    left: auto !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
  }

  body.authenticated .help-toggle {
    display: grid !important;
    width: 54px !important;
    min-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 !important;
    place-items: center !important;
    border-radius: 50% !important;
    transform: none !important;
  }

  body.authenticated .help-toggle .help-logo {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    margin: 0 !important;
  }

  body.authenticated .help-panel {
    position: fixed !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    left: 10px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100svh - 20px) !important;
    overflow-y: auto !important;
    border-radius: 14px !important;
  }

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

  /* Major mobile workspace: one stage rail, one contextual subnav, one action sheet. */
  body.authenticated .sidebar {
    gap: 5px !important;
  }

  body.authenticated .suite-nav {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows: 42px auto !important;
    gap: 5px 3px !important;
  }

  body.authenticated .suite-nav-group,
  body.authenticated .suite-nav-group.is-current,
  body.authenticated .suite-nav-group[open] {
    display: contents !important;
  }

  body.authenticated .suite-nav-group > summary,
  body.authenticated .suite-nav-group.is-current > summary,
  body.authenticated .suite-nav-group[open] > summary,
  body.authenticated .suite-nav-group:not(.is-current):not([open]) > summary {
    grid-row: 1 !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 6px 2px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #3b526b !important;
    border-radius: 8px !important;
    background: #0d2943 !important;
    color: #dce7f2 !important;
    text-align: center !important;
    list-style: none !important;
  }

  body.authenticated .suite-nav-group:nth-of-type(1) > summary { grid-column: 1 !important; }
  body.authenticated .suite-nav-group:nth-of-type(2) > summary { grid-column: 2 !important; }
  body.authenticated .suite-nav-group:nth-of-type(3) > summary { grid-column: 3 !important; }
  body.authenticated .suite-nav-group:nth-of-type(4) > summary { grid-column: 4 !important; }
  body.authenticated .suite-nav-group:nth-of-type(5) > summary { grid-column: 5 !important; }

  body.authenticated .suite-nav-group > summary::-webkit-details-marker,
  body.authenticated .suite-nav-group > summary::marker,
  body.authenticated .suite-nav-group > summary::after,
  body.authenticated .suite-nav-group > summary > span,
  body.authenticated .suite-nav-group > summary > small {
    display: none !important;
    content: none !important;
  }

  body.authenticated .suite-nav-group > summary strong,
  body.authenticated .suite-nav-group:not(.is-current):not([open]) > summary strong {
    display: block !important;
    min-width: 0 !important;
    color: inherit !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere !important;
  }

  body.authenticated .suite-nav-group.is-current > summary,
  body.authenticated .suite-nav-group[open] > summary {
    border-color: #6f94ff !important;
    background: #2857d4 !important;
    color: #ffffff !important;
  }

  body.authenticated .suite-nav-group > div,
  body.authenticated .suite-nav-group.is-current > div,
  body.authenticated .suite-nav-group[open] > div {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 43px !important;
    padding: 4px !important;
    gap: 4px !important;
    overflow-x: auto !important;
    border: 1px solid #304a64 !important;
    border-radius: 9px !important;
    background: #071d33 !important;
    scrollbar-width: none !important;
  }

  body.authenticated .suite-nav-group > div::-webkit-scrollbar {
    display: none !important;
  }

  body.authenticated .suite-nav-group .suite-link,
  body.authenticated .suite-nav-group.is-current .suite-link,
  body.authenticated .suite-nav-group[open] .suite-link {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-height: 35px !important;
    padding: 8px 10px !important;
    border-radius: 7px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  body.authenticated .sidebar-model-controls {
    padding-top: 0 !important;
  }

  body.authenticated .topbar {
    grid-template-columns: minmax(0, 1fr) 66px !important;
    align-items: start !important;
  }

  body.authenticated[data-active-view="flowsheet"] .topbar {
    grid-template-columns: minmax(0, 1fr) 62px 62px !important;
    gap: 6px !important;
  }

  html body.authenticated:not(.locked)[data-active-view="flowsheet"] .topbar {
    height: auto !important;
    min-height: 0 !important;
  }

  body.authenticated .topbar .workspace-path {
    display: none !important;
  }

  body.authenticated .topbar-main > div {
    min-width: 0 !important;
  }

  body.authenticated .topbar .workspace-title-row h2 {
    width: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  body.authenticated .topbar .view-description {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  body.authenticated .profile-menu {
    grid-column: 2 !important;
    width: 66px !important;
  }

  body.authenticated[data-active-view="flowsheet"] .profile-menu {
    grid-column: 3 !important;
    width: 62px !important;
  }

  body.authenticated .topbar .profile-button {
    width: 66px !important;
    min-width: 66px !important;
  }

  body.authenticated .mobile-actions-toggle {
    display: none !important;
  }

  body.authenticated[data-active-view="flowsheet"] .mobile-actions-toggle {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    width: 62px !important;
    min-width: 62px !important;
    min-height: 42px !important;
    padding: 7px 6px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #aebed0 !important;
    border-radius: 21px !important;
    background: #ffffff !important;
    color: #071d33 !important;
    font-size: 10px !important;
    font-weight: 750 !important;
  }

  body.authenticated[data-active-view="flowsheet"] .topbar .profile-button {
    width: 62px !important;
    min-width: 62px !important;
  }

  body.authenticated[data-active-view="flowsheet"] .mobile-actions-toggle[aria-expanded="true"] {
    border-color: #2857d4 !important;
    background: #2857d4 !important;
    color: #ffffff !important;
  }

  body.authenticated .topbar > .actions,
  body.authenticated[data-active-view="flowsheet"] .topbar > .actions {
    display: none !important;
  }

  body.authenticated[data-active-view="flowsheet"] .topbar > .actions.mobile-open {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    padding: 10px 0 0 !important;
    gap: 7px !important;
    overflow: visible !important;
  }

  body.authenticated .topbar > .actions.mobile-open :where(button, .action-button) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    white-space: normal !important;
  }

  body.authenticated .topbar > .actions.mobile-open > :last-child {
    grid-column: 1 / -1 !important;
  }

  body.authenticated #workflowGuide {
    border-radius: 10px !important;
  }

  body.authenticated #workflowGuide > .workflow-guide-summary {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    min-height: 52px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
    align-items: center !important;
  }

  body.authenticated #workflowGuide .workflow-guide-step {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  body.authenticated #workflowGuide .workflow-guide-context {
    min-width: 0 !important;
  }

  body.authenticated #workflowGuide .workflow-guide-context strong {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.authenticated #workflowGuide .workflow-guide-next {
    display: none !important;
  }

  body.authenticated #workflowGuide .workflow-guide-toggle {
    min-height: 34px !important;
    padding: 8px 9px !important;
    border: 1px solid #bcc9d7 !important;
    border-radius: 17px !important;
    background: #ffffff !important;
    color: #071d33 !important;
    font-size: 9px !important;
    white-space: nowrap !important;
  }

  body.authenticated #workflowGuide .workflow-guide-body {
    padding: 0 10px 10px !important;
  }

  body.authenticated #workflowGuide .workflow-stage-rail {
    display: flex !important;
    width: 100% !important;
    gap: 6px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  body.authenticated #workflowGuide .workflow-stage-rail::-webkit-scrollbar {
    display: none !important;
  }

  body.authenticated #workflowGuide .workflow-stage-rail > button {
    flex: 0 0 126px !important;
    min-height: 72px !important;
    padding: 9px !important;
  }

  body.authenticated #workflowGuide .workflow-task-bar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.authenticated #workflowGuide .workflow-task-bar > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.authenticated :where(button, a, summary, select) {
    min-height: 42px;
  }

  body.authenticated .workspace-disclosure > summary {
    min-height: 52px !important;
    padding: 12px !important;
  }

  body.authenticated #flowsheetView .mobile-flow-switcher {
    order: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    padding: 5px !important;
    gap: 5px !important;
    border: 1px solid #b9c7d6 !important;
    border-radius: 11px !important;
    background: #e8eef5 !important;
  }

  body.authenticated #flowsheetView .mobile-flow-switcher button {
    width: 100% !important;
    min-height: 44px !important;
    padding: 9px 10px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #263d55 !important;
    font-size: 11px !important;
    font-weight: 750 !important;
  }

  body.authenticated #flowsheetView .mobile-flow-switcher button[aria-selected="true"] {
    background: #ffffff !important;
    color: #071d33 !important;
    box-shadow: 0 1px 4px rgba(7, 29, 51, 0.16) !important;
  }

  body.authenticated #flowsheetView .canvas-frame[data-mobile-panel="canvas"] > .builder-library,
  body.authenticated #flowsheetView .canvas-frame[data-mobile-panel="library"] > :not(.mobile-flow-switcher):not(.builder-library) {
    display: none !important;
  }

  body.authenticated #flowsheetView .canvas-frame[data-mobile-panel="library"] > .builder-library {
    display: block !important;
    max-height: min(72svh, 640px) !important;
  }
}

@media (max-width: 380px) {
  :root {
    --ax-mobile-gutter: 13px;
  }

  body.locked .public-nav nav :where(.public-menu-toggle, .public-nav-login) {
    padding-right: 9px !important;
    padding-left: 9px !important;
    font-size: 11px !important;
  }

  body.authenticated .workspace {
    padding: 8px !important;
  }

  body.authenticated .topbar {
    padding: 10px !important;
  }

  body.authenticated .topbar h2 {
    font-size: 20px !important;
  }

  body.authenticated #flowsheetView .canvas-mode-switch {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  body.authenticated .app-shell {
    grid-template-columns: 224px minmax(0, 1fr) !important;
  }

  body.authenticated .sidebar {
    width: 224px !important;
  }

  body.authenticated .workspace {
    min-width: 0 !important;
    padding: 16px !important;
  }

  body.locked .public-section.public-page:not(#publicHome) {
    padding-right: 28px !important;
    padding-left: 28px !important;
  }

  body.locked #publicPricing .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile refinement: keep the stage rail compact and give the contextual
   navigation the full viewport width instead of one inherited grid track. */
@media (max-width: 760px) {
  html body.locked main.public-scroll > section.public-section.public-page.active-public-page:not(#publicHome),
  html body.locked main.public-scroll > #loginPanel.public-login.active-public-page,
  html body.locked main.public-scroll > #publicPricing.public-pricing.active-public-page,
  html body.locked main.public-scroll > #publicPilot.public-pilot.active-public-page {
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  body.locked #loginPanel .checkout-unavailable {
    order: 2 !important;
  }

  body.authenticated .sidebar {
    padding: 6px 10px 7px !important;
    gap: 4px !important;
  }

  body.authenticated .sidebar .brand {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 5px !important;
  }

  body.authenticated .sidebar .brand .brand-mark-image {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
  }

  body.authenticated .suite-nav {
    position: relative !important;
    grid-template-rows: 40px 0 !important;
    padding-bottom: 43px !important;
    gap: 4px 3px !important;
  }

  body.authenticated .suite-nav-group > summary,
  body.authenticated .suite-nav-group.is-current > summary,
  body.authenticated .suite-nav-group[open] > summary,
  body.authenticated .suite-nav-group:not(.is-current):not([open]) > summary {
    min-height: 40px !important;
    height: 40px !important;
  }

  body.authenticated .suite-nav-group > div,
  body.authenticated .suite-nav-group.is-current > div,
  body.authenticated .suite-nav-group[open] > div {
    position: absolute !important;
    top: 44px !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 2 !important;
    width: 100% !important;
    min-width: 100% !important;
    min-height: 39px !important;
    height: 39px !important;
    padding: 3px !important;
  }

  body.authenticated .suite-nav-group .suite-link,
  body.authenticated .suite-nav-group.is-current .suite-link,
  body.authenticated .suite-nav-group[open] .suite-link {
    min-height: 31px !important;
    height: 31px !important;
    padding: 7px 8px !important;
  }

  body.authenticated .sidebar-model-controls {
    padding: 0 !important;
    gap: 4px !important;
  }

  body.authenticated .sidebar-settings > summary {
    min-height: 32px !important;
    height: 32px !important;
    padding: 5px 4px !important;
  }

  body.authenticated .workspace {
    padding: 8px !important;
    gap: 8px !important;
  }

  body.authenticated .topbar {
    padding: 10px !important;
    gap: 7px !important;
  }

  body.authenticated .topbar h2 {
    font-size: 20px !important;
  }

  body.authenticated .topbar .view-description {
    margin-top: 3px !important;
    -webkit-line-clamp: 1 !important;
  }

  body.authenticated .kpi-strip article {
    flex-basis: 144px !important;
    min-width: 144px !important;
    min-height: 72px !important;
    padding: 10px !important;
  }

  body.authenticated .kpi-strip article strong {
    font-size: 18px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }
}

/* Mobile closing banner: compact, aligned, and readable without staggered columns. */
@media (max-width: 760px) {
  body.locked #publicHome .editorial-cta {
    width: calc(100% - (2 * var(--ax-mobile-gutter))) !important;
    margin: 0 var(--ax-mobile-gutter) !important;
    padding: 26px 20px !important;
    gap: 20px !important;
    border-radius: 8px 8px 0 0 !important;
  }

  body.locked #publicHome .editorial-cta h2 {
    max-width: 100% !important;
    font-size: 28px !important;
    line-height: 1.1 !important;
  }

  body.locked #publicHome .editorial-cta-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 8px !important;
  }

  body.locked #publicHome .editorial-cta-actions a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 11px 16px !important;
    text-align: center !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
  }

  body.locked #publicHome .editorial-footer {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: calc(100% - (2 * var(--ax-mobile-gutter))) !important;
    margin: 0 var(--ax-mobile-gutter) !important;
    padding: 28px 20px 32px !important;
    gap: 22px !important;
    border-top: 1px solid rgba(210, 226, 240, .24) !important;
    border-radius: 0 0 8px 8px !important;
  }

  body.locked #publicHome .editorial-footer :where(.editorial-footer-brand, nav) {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    align-self: start !important;
  }

  body.locked #publicHome .editorial-footer nav {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    gap: 8px 16px !important;
  }

  body.locked #publicHome .editorial-footer nav strong {
    flex: 0 0 100% !important;
    margin: 0 0 2px !important;
  }

  body.locked #publicHome .editorial-footer nav a {
    min-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  body.locked #publicReference > .public-breadcrumbs {
    display: flex !important;
    max-width: 100% !important;
    gap: 8px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
  }

  body.locked #publicReference > .public-breadcrumbs::-webkit-scrollbar {
    display: none !important;
  }

  body.locked #publicReference > .reference-hero {
    gap: 24px !important;
    padding: 26px 20px !important;
  }

  body.locked #publicReference > .reference-hero h1 {
    max-width: 100% !important;
    font-size: clamp(34px, 10vw, 42px) !important;
    line-height: 1.06 !important;
  }

  body.locked #publicReference > .reference-hero > div > span {
    margin-top: 16px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  body.locked #publicReference .reference-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    margin-top: 22px !important;
  }

  body.locked #publicReference .reference-actions a {
    width: 100% !important;
    min-height: 46px !important;
  }

  body.locked #publicReference .reference-ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.locked #publicReference .reference-ledger div {
    padding: 13px 11px !important;
  }

  body.locked #publicReference .reference-ledger dd {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  body.authenticated .start-decision-contract > header {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 20px !important;
  }

  body.authenticated .start-decision-flow {
    grid-template-columns: 1fr !important;
  }

  body.authenticated .start-decision-flow article {
    padding: 17px 20px !important;
    border-right: 0 !important;
    border-bottom: 1px solid #294861 !important;
  }

  body.authenticated .start-decision-flow article:last-child {
    border-bottom: 0 !important;
  }

  body.authenticated .process-brief-requirements {
    gap: 5px !important;
  }

  body.locked #publicHome .public-decision-map {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 32px 0 !important;
  }

  body.locked #publicHome .public-decision-map ol {
    grid-template-columns: 1fr !important;
  }

  body.locked #publicHome .public-decision-map li {
    padding: 15px 0 !important;
    border-left: 0 !important;
    border-top: 1px solid #cbd6e2 !important;
  }
}