/* Shared adaptive layout. The first cascade layer also protects touch sizing
   from older page-specific !important desktop declarations. */
.responsive-controls-toggle, .landing-menu-toggle { display: none; }
@layer mobile_readability {
  @media screen and (max-width: 1279px), screen and (pointer: coarse) {
    /* Help stays inside the viewport, including when a heading is near an edge. */
    .metric-card__info::after { display: none !important; }
    .metric-card__info:is(:hover, :focus-visible)::after { display: block !important; position: fixed !important; left: 16px !important; right: 16px !important; top: auto !important; bottom: 104px !important; width: auto !important; min-width: 0 !important; max-width: none !important; transform: none !important; white-space: normal !important; font-size: 14px !important; z-index: 2000 !important; }
    html { font-size: 100% !important; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body { font-size: 16px !important; line-height: 1.5 !important; }
    body :is(p, td, input, select, textarea, option, button, summary) { font-size: 16px !important; line-height: 1.45 !important; }
    body :is(label, small, th, .muted-copy, .field-label, .eyebrow, .status-pill, .status-badge) { font-size: 14px !important; line-height: 1.4 !important; }
    body :is(button, summary, label, td, th) span { font-size: inherit !important; }
    body :is(button, input:not([type=checkbox]):not([type=radio]):not([type=range]), select, summary) { min-height: 44px !important; height: auto !important; }
    body :is(button.icon-button, .icon-button, .table-scroll-button) { min-width: 44px !important; }
    body :is(h2, h3, h4, h5, h6) { font-size: 20px !important; line-height: 1.3 !important; }
    body :is(.table-wrap, .table-scroll, .table-responsive, .agentic-target-table-wrap) { max-width: 100% !important; min-width: 0 !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    body :is(.table-toolbar, .toolbar-row, .toolbar-actions, .filter-row, .form-actions) { flex-wrap: wrap !important; gap: 8px !important; min-width: 0 !important; }
    body :is(.toolbar-search, input, select, textarea) { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }
    body :is(.chart-grid, .metric-grid, .detail-grid) { min-width: 0 !important; }
    body :is(.detail-drawer__panel, .popup-window__panel) { max-width: calc(100vw - 16px) !important; max-height: calc(100dvh - 16px) !important; }
    body :is(.detail-drawer__content, .popup-window__body) { min-width: 0 !important; overflow: auto !important; overscroll-behavior: contain; }
    body :is(.agentic-chat-prose, .agentic-chat-prose p, .agentic-chat-prose li) { font-size: 16px !important; overflow-wrap: anywhere; }
    body :is(.agentic-chat-prose pre, .agentic-chat-prose table) { max-width: 100%; overflow-x: auto; }
  }
  @media screen and (max-width: 1279px) {
    #appShell, #appShell.sidebar-collapsed { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) !important; grid-template-areas: 'header' 'workspace' !important; }
    #appShell > .topbar { grid-area: header !important; display: grid !important; grid-template-columns: minmax(0, 1fr) 44px !important; grid-template-rows: auto auto !important; align-items: center !important; height: auto !important; min-height: 60px !important; max-height: 65dvh !important; padding: 8px !important; gap: 6px !important; overflow: visible !important; margin: 0 !important; width: 100% !important; box-sizing: border-box !important; }
    .topbar__left { display: flex !important; gap: 8px !important; min-width: 0 !important; width: auto !important; }
    #mobileSidebarToggle { display: inline-flex !important; flex: 0 0 44px !important; align-items: center; justify-content: center; }
    .topbar-brand { display: flex !important; flex: 1 1 auto !important; width: auto !important; max-width: 100% !important; gap: 8px !important; min-width: 0 !important; }
    .topbar .company-logo-button { width: 78px !important; min-width: 78px !important; height: 44px !important; padding: 4px !important; }
    .topbar .company-logo { width: 100% !important; height: 100% !important; object-fit: contain !important; }
    .company-header-copy { min-width: 0 !important; }
    .topbar .product-wordmark strong { font-size: 16px !important; white-space: nowrap; }
    .topbar .product-wordmark small { font-size: 12px !important; }
    .topbar :is(.topbar-brand__workflow, .topbar-active-view) { display: none !important; }
    .responsive-controls-toggle { display: inline-flex !important; align-items: center; justify-content: center; grid-column: 2; grid-row: 1; width: 44px !important; padding: 10px !important; }
    .responsive-controls-toggle svg, .landing-menu-toggle svg { width: 22px; height: 22px; flex-shrink: 0; }
    .topbar > .topbar__right { display: none !important; }
    .topbar[data-controls-open] > .topbar__right { display: flex !important; flex-wrap: wrap !important; grid-column: 1 / -1 !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; max-height: 50dvh !important; overflow: auto !important; padding: 8px 0 !important; gap: 10px !important; height: auto !important; }
    .topbar :is(.topbar-control-group, .topbar-control-group--navigation, .topbar-control-group--account) { display: flex !important; flex-wrap: wrap !important; flex: 1 1 100% !important; min-width: 0 !important; max-width: 100% !important; gap: 8px !important; }
    .topbar .topbar-search { flex: 1 1 160px !important; width: auto !important; min-width: 0 !important; max-width: none !important; }
    .topbar #globalHeaderSearch { width: 100% !important; }
    .topbar .topbar__utility-group { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; min-width: 0 !important; }
    .topbar :is(.mode-switch, .tenant-context-selector) { max-width: 100% !important; min-width: 0 !important; }
    .topbar .tenant-context-selector { width: 100% !important; height: auto !important; padding: 6px 10px !important; }
    .topbar .tenant-context-selector__copy { min-width: 0 !important; }
    .topbar .tenant-context-selector__copy select { font-size: 16px !important; min-height: 44px !important; }
    .topbar #modeSwitch { display: block !important; flex: 1 1 100% !important; height: auto !important; overflow: visible !important; }
    .topbar #globalHeaderSearch { font-size: 16px !important; }
    .topbar :is(.global-search-dropdown, .topbar-context-menu__panel) { position: fixed !important; inset: 120px 8px auto !important; width: auto !important; max-width: calc(100vw - 16px) !important; max-height: 55dvh !important; overflow: auto !important; z-index: 1200 !important; }
    #appShell > .sidebar { position: fixed !important; inset: 8px auto 8px 8px !important; width: min(320px, calc(100vw - 32px)) !important; height: calc(100dvh - 16px) !important; max-height: calc(100dvh - 16px) !important; z-index: 1100 !important; transform: translateX(calc(-100% - 16px)) !important; margin: 0 !important; visibility: hidden !important; }
    #appShell.mobile-sidebar-open > .sidebar { transform: translateX(0) !important; visibility: visible !important; }
    #sidebarBackdrop:not([hidden]) { display: block !important; position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100dvh !important; z-index: 1090 !important; background: rgb(0 0 0 / .55) !important; border: 0 !important; border-radius: 0 !important; }
    .sidebar :is(.nav-item, .nav-group__toggle) { min-height: 44px !important; }
    .workspace { grid-area: workspace !important; min-width: 0 !important; margin: 0 !important; }
    #appContent { padding: 12px !important; min-width: 0 !important; }
    #appContent > * { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; }
    .workspace-footer { flex-wrap: wrap !important; gap: 6px !important; padding: 6px 8px !important; max-height: 96px !important; }
    .workspace-footer > :is(.footer-pill--workspace, .footer-pill--database, .footer-pill--clock) { display: none !important; }
    .footer-workspace-details .footer-pill { display: flex !important; }
    .workspace-footer .footer-workspace-details { display: block !important; margin-left: auto; }
    .workspace-footer .footer-status-ready { font-size: 14px !important; }
    .landing-header { flex-wrap: wrap !important; gap: 10px !important; padding: 12px 16px !important; }
    .landing-brand { min-width: 0 !important; margin-right: auto; }
    .landing-brand__text strong { font-size: 18px !important; }
    .landing-brand__text small { font-size: 14px !important; }
    .landing-menu-toggle { display: inline-flex !important; align-items: center; justify-content: center; width: 44px; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 10px; }
    .landing-header > nav { display: none !important; }
    .landing-header[data-menu-open] > nav { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); order: 5 !important; flex: 1 1 100% !important; width: 100% !important; padding: 8px !important; gap: 8px !important; overflow: visible !important; }
    .landing-header :is(nav a, .landing-signin) { font-size: 16px !important; min-height: 44px !important; display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px !important; box-sizing: border-box; }
    .landing-body :is(.landing-hero__tagline, .landing-hero__note, .landing-preview p, .landing-preview small, .landing-plan li, .landing-feature p) { font-size: 16px !important; }
    .landing-body :is(.landing-preview__step > span, .landing-preview__finding > span, .landing-preview__footer, .landing-preview__badge) { font-size: 14px !important; }
    .landing-body .landing-hero h1 { font-size: clamp(30px, 3.4vw, 40px) !important; line-height: 1.2 !important; }
    .landing-body .landing-hero h1 :is(em, strong, span) { font-size: inherit !important; }
  }
  @media screen and (min-width: 768px) and (max-width: 1023px) {
    .landing-hero { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
    .landing-outcomes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  }
  @media screen and (max-width: 767px) {
    body .table-head { flex-wrap: wrap !important; gap: 10px !important; }
    body .table-head > div { min-width: 0 !important; max-width: 100% !important; }
    body :is(.sdwan-accordion__summary, .f5-bigip__accordion-summary) { grid-template-columns: auto minmax(0, 1fr) auto !important; padding: 12px !important; gap: 8px !important; }
    body :is(.sdwan-accordion__count, .f5-bigip__accordion-count) { grid-column: 2 !important; grid-row: 2 !important; justify-self: start !important; white-space: normal !important; }
    body :is(.sdwan-accordion__chevron, .f5-bigip__accordion-chevron) { grid-column: 3 !important; grid-row: 1 !important; }
    body :is(.sdwan-discovery__command-list, .f5-bigip__command-list) { grid-template-columns: minmax(0, 1fr) !important; }
    body .modern-pagination__progress { width: auto !important; min-width: max-content !important; }
    body .tshoot-combo-table__select-column { min-width: 100px !important; }
    body .device-inline-action__icon { min-width: 16px !important; }
    .topbar .product-wordmark small { display: none !important; }
    #appContent { padding: 8px !important; }
    .workspace-footer .footer-status-ready { display: none !important; }
    body :is(.detail-grid, .form-grid, .chart-grid, .automation-center__device-row, .automation-center__confirmation-lists, .automation-device-history__charts, .agentic-target-cascade) { grid-template-columns: minmax(0, 1fr) !important; }
    body :is(.metric-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    body :is(.detail-drawer__head, .popup-window__header) { padding: 12px !important; gap: 8px !important; }
    body :is(.detail-drawer__content, .popup-window__body) { padding: 12px !important; }
    body :is(.table-toolbar, .toolbar-row) > .toolbar-search { flex-basis: 100% !important; width: 100% !important; }
    .landing-brand__company-mark { width: 82px !important; height: 42px !important; padding: 4px !important; }
    .landing-brand__text small { display: none !important; }
    .landing-brand__text strong { font-size: 16px !important; }
    .landing-header { gap: 6px !important; padding: 8px !important; }
    .landing-header .landing-signin { padding: 8px !important; }
    .landing-body .landing-hero { grid-template-columns: minmax(0, 1fr) !important; padding: 28px 16px !important; gap: 24px !important; }
    .landing-body .landing-hero h1 { font-size: 30px !important; }
    .landing-hero h1 br { display: none !important; }
    .landing-hero__copy, .landing-preview, .landing-hero__context { min-width: 0 !important; max-width: 100% !important; }
    .landing-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; gap: 10px !important; }
    .landing-actions > * { width: 100% !important; text-align: center !important; justify-content: center !important; white-space: normal !important; box-sizing: border-box; }
    .landing-preview__header, .landing-preview__footer { flex-wrap: wrap !important; gap: 8px !important; }
    .landing-body :is(.landing-outcomes__grid, .landing-plan-grid, .landing-signup, .landing-features) { grid-template-columns: minmax(0, 1fr) !important; }
    .landing-body :is(.landing-section, .landing-signup) { padding-inline: 16px !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sidebar, .landing-header nav { transition: none !important; }
  }
}