/* ui480: final desktop command-deck surface and copy-safe control layer. */
:root {
  --ui480-canvas: 1280px;
  --ui480-bg: #07131b;
  --ui480-surface: #0d1b24;
  --ui480-surface-raised: #112631;
  --ui480-surface-active: #173744;
  --ui480-line: rgba(185, 220, 231, 0.16);
  --ui480-line-strong: rgba(121, 216, 242, 0.72);
  --ui480-text: #f0f7f8;
  --ui480-muted: #a7bac2;
  --ui480-faint: #7f969f;
  --ui480-signal: #79d8f2;
  --ui480-signal-deep: #176579;
  --ui480-good: #8bd5ae;
  --ui480-warn: #e5b86e;
  --ui480-danger: #ed9186;
  --ui480-radius: 8px;
  --ui480-inner-radius: 6px;
}

/* Narrow windows keep the desktop document. They scroll horizontally instead
   of activating a second navigation or typography system. */
html,
html body {
  min-width: var(--ui480-canvas) !important;
}

html body #portal-root,
html body #root {
  min-width: var(--ui480-canvas) !important;
  width: max(var(--ui480-canvas), 100%) !important;
  max-width: none !important;
}

html body #portal-root main.portal-shell,
html body #root main.geo-admin-shell {
  box-sizing: border-box !important;
  min-width: var(--ui480-canvas) !important;
  width: max(var(--ui480-canvas), 100%) !important;
  max-width: none !important;
  overflow-x: clip !important;
  color: var(--ui480-text) !important;
  background: var(--ui480-bg) !important;
}

/* Mobile-only controls are not part of the product information architecture. */
html body #portal-root :is(.portal-mobile-nav, .mobile-nav, .mobile-nav-toggle, .mobile-menu, [data-mobile-only]),
html body #root :is(.geo-mobile-nav-hint, .mobile-portal-link, .mobile-nav, .mobile-nav-toggle, .mobile-nav-actions, .menu-button, .mobile-title, [data-mobile-only]) {
  display: none !important;
}

html body #root .site-header .nav {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Every visible module uses the same quiet outer shell. The selector includes
   anonymous articles because several data views render cards without a class. */
html body #portal-root main.portal-shell .portal-content-stage :where(
  .panel, .card, [class~="card"], [class$="-card"], [class*="-card "], article,
  .page-control-tower, .flight-cockpit, .workbench-panel, .publisher-command-center,
  .publisher-account-station, .publisher-assets, .publisher-jobs, .report-pack-launcher,
  .setup-checklist-card, .prompt-matrix-card, .compliance-test-card
),
html body #root main.geo-admin-shell .geo-content :where(
  .geo-panel, .geo-card, [class~="card"], [class$="-card"], [class*="-card "], article,
  .admin-dashboard-v2, .geo-module-story, .admin-flight-command, .geo-command,
  .geo-control, .geo-delivery-console, .geo-api-code-card, .geo-permission-grid
) {
  box-sizing: border-box !important;
  min-width: 0 !important;
  border: 1px solid var(--ui480-line) !important;
  border-radius: var(--ui480-radius) !important;
  background: var(--ui480-surface) !important;
  background-image: none !important;
  color: var(--ui480-text) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

/* The command bar is a product surface too; keep it on the same blue-black
   plane as the content modules instead of inheriting older green chrome. */
html body #root main.geo-admin-shell .geo-workspace,
html body #root main.geo-admin-shell .geo-topbar,
html body #root main.geo-admin-shell .geo-topbar-actions,
html body #root main.geo-admin-shell .geo-auto-cruise-badge,
html body #portal-root main.portal-shell .portal-status-strip {
  border-color: var(--ui480-line) !important;
  background: var(--ui480-bg) !important;
  background-image: none !important;
  color: var(--ui480-text) !important;
}

html body #root main.geo-admin-shell .geo-topbar :where(button, a, select),
html body #portal-root main.portal-shell .portal-status-strip :where(button, a, select) {
  border-color: var(--ui480-line) !important;
  background: var(--ui480-surface-raised) !important;
  color: var(--ui480-text) !important;
  -webkit-text-fill-color: var(--ui480-text) !important;
}

html body #portal-root main.portal-shell .portal-content-stage :where(
  article, .card, [class~="card"], [class$="-card"], [class*="-card "],
  .page-control-stats article, .page-control-actions button,
  .client-home-kpis > *, .client-home-next-grid > *, .task-pool-cards article,
  .publisher-platform, .publisher-job, .report-package-card
),
html body #root main.geo-admin-shell .geo-content :where(
  article, .geo-card, [class~="card"], [class$="-card"], [class*="-card "],
  .geo-kpi, .geo-project-grid > *, .geo-report-grid > *, .geo-action-card,
  .geo-health-card, .geo-task-health-grid > *, .geo-task-job-grid > *,
  .geo-form-grid > *
) {
  border-radius: var(--ui480-inner-radius) !important;
  background: var(--ui480-surface-raised) !important;
  box-shadow: none !important;
}

/* Neutralize legacy green, white-transparent and oversized rounded surfaces. */
html body #portal-root main.portal-shell .portal-content-stage :where(
  .mission-action-card, .client-home-command-deck, .client-home-hero,
  .client-home-meter, .client-command-console, .client-command-hero,
  .client-flight-route, .tracking-score-card, .report-pack-launcher,
  .setup-checklist-card, .prompt-matrix-card, .compliance-test-card,
  .risk-checklist-card, .content-workstation, .page-control-tower
),
html body #root main.geo-admin-shell .geo-content :where(
  .admin-flight-commandbar, .geo-admin-commandbar, .geo-command-status,
  .geo-permission-grid, .geo-api-code-card, .geo-project-card,
  .geo-report-card, .geo-story-card, .geo-module-story, .geo-workspace-panel
) {
  border-radius: var(--ui480-radius) !important;
  border-color: var(--ui480-line) !important;
  background: var(--ui480-surface) !important;
  background-image: none !important;
}

/* One readable type scale for dense operational copy. */
html body #portal-root main.portal-shell .portal-content-stage :where(p, li, label, input, select, textarea, button, a),
html body #root main.geo-admin-shell .geo-content :where(p, li, label, input, select, textarea, button, a) {
  color: var(--ui480-text) !important;
  -webkit-text-fill-color: var(--ui480-text) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
}

html body #portal-root main.portal-shell .portal-content-stage :where(.muted, small, .hint, .caption, .meta, .eyebrow),
html body #root main.geo-admin-shell .geo-content :where(.muted, small, .hint, .caption, .meta, .eyebrow) {
  color: var(--ui480-muted) !important;
  -webkit-text-fill-color: var(--ui480-muted) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}

html body #portal-root main.portal-shell .portal-content-stage :where(h1, h2, h3, h4, strong, b),
html body #root main.geo-admin-shell .geo-content :where(h1, h2, h3, h4, strong, b) {
  color: var(--ui480-text) !important;
  -webkit-text-fill-color: var(--ui480-text) !important;
}

/* Buttons have one signal hierarchy: cyan for execution, slate for navigation,
   amber/red only for the corresponding business state. */
html body #portal-root main.portal-shell :where(button, a.btn, a[role="button"]),
html body #root main.geo-admin-shell :where(button, .geo-mini-button, .geo-story-button, .geo-action-card-button, .geo-notice-action, a[role="button"]) {
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 38px !important;
  border: 1px solid var(--ui480-line) !important;
  border-radius: var(--ui480-inner-radius) !important;
  background: var(--ui480-surface-raised) !important;
  background-image: none !important;
  color: var(--ui480-text) !important;
  -webkit-text-fill-color: var(--ui480-text) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease !important;
}

html body #portal-root main.portal-shell :where(button:hover, button:focus-visible, a.btn:hover, a.btn:focus-visible, a[role="button"]:hover, a[role="button"]:focus-visible),
html body #root main.geo-admin-shell :where(button:hover, button:focus-visible, .geo-mini-button:hover, .geo-mini-button:focus-visible, .geo-story-button:hover, .geo-story-button:focus-visible, a[role="button"]:hover, a[role="button"]:focus-visible) {
  border-color: var(--ui480-line-strong) !important;
  background: var(--ui480-surface-active) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  transform: translateY(-1px);
}

html body #portal-root main.portal-shell :where(.primary, .cockpit-launch-action, .self-start-primary, .client-ignite-button, .launch-button, .mission-next-main, .publisher-editor-actions .primary),
html body #root main.geo-admin-shell :where(.primary, button.primary, .cockpit-launch-action, .geo-mini-button.accent, .geo-story-button.primary, .geo-action-card-button.primary, .geo-toolbar button:first-child) {
  border-color: var(--ui480-signal) !important;
  background: var(--ui480-signal-deep) !important;
  color: #f2feff !important;
  -webkit-text-fill-color: #f2feff !important;
  box-shadow: 0 8px 18px rgba(23, 101, 121, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.11) !important;
}

html body #portal-root main.portal-shell :where(.primary:hover, .cockpit-launch-action:hover, .self-start-primary:hover, .client-ignite-button:hover),
html body #root main.geo-admin-shell :where(.primary:hover, button.primary:hover, .cockpit-launch-action:hover, .geo-mini-button.accent:hover) {
  border-color: #b8efff !important;
  background: #21859a !important;
}

html body #portal-root main.portal-shell :where(.danger, .is-danger, .warning, .warn),
html body #root main.geo-admin-shell :where(.danger, .is-danger, .warning, .warn) {
  border-color: color-mix(in srgb, var(--ui480-warn) 54%, transparent) !important;
  background: color-mix(in srgb, var(--ui480-warn) 10%, var(--ui480-surface-raised)) !important;
  color: var(--ui480-warn) !important;
  -webkit-text-fill-color: var(--ui480-warn) !important;
}

html body #portal-root main.portal-shell :where(.success, .good, .ready),
html body #root main.geo-admin-shell :where(.success, .good, .ready) {
  border-color: color-mix(in srgb, var(--ui480-good) 52%, transparent) !important;
  color: var(--ui480-good) !important;
  -webkit-text-fill-color: var(--ui480-good) !important;
}

html body #portal-root main.portal-shell :where(input, select, textarea),
html body #root main.geo-admin-shell :where(input, select, textarea) {
  box-sizing: border-box !important;
  min-width: 0 !important;
  border: 1px solid var(--ui480-line) !important;
  border-radius: var(--ui480-inner-radius) !important;
  background: #0a171f !important;
  color: var(--ui480-text) !important;
  -webkit-text-fill-color: var(--ui480-text) !important;
}

html body #portal-root main.portal-shell :where(button:disabled, .disabled),
html body #root main.geo-admin-shell :where(button:disabled, .disabled) {
  opacity: 0.46 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Keep the launch treatment focused on the real execution controls. */
html body #portal-root main.portal-shell .cockpit-launch-action,
html body #root main.geo-admin-shell .cockpit-launch-action {
  border-color: var(--ui480-signal) !important;
  background: var(--ui480-signal-deep) !important;
  box-shadow: 0 8px 18px rgba(23, 101, 121, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.11) !important;
}

html body #portal-root main.portal-shell .cockpit-launch-action.is-cockpit-launching,
html body #root main.geo-admin-shell .cockpit-launch-action.is-cockpit-launching {
  border-color: #b8efff !important;
}

/* Server-rendered report, share and legacy management pages use .wrap. Keep
   their desktop canvas and command controls in the same visual family. */
html body .wrap {
  box-sizing: border-box !important;
  min-width: var(--ui480-canvas) !important;
  width: var(--ui480-canvas) !important;
  max-width: none !important;
  margin-inline: 0 !important;
  color: var(--ui480-text) !important;
  background: var(--ui480-bg) !important;
}

html body .wrap :where(.hero, .panel, .card, section, article) {
  border-color: var(--ui480-line) !important;
  border-radius: var(--ui480-radius) !important;
  background: var(--ui480-surface) !important;
  background-image: none !important;
  color: var(--ui480-text) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18) !important;
}

html body .wrap :where(.btn, button, .nav a) {
  min-height: 38px !important;
  border: 1px solid var(--ui480-line) !important;
  border-radius: var(--ui480-inner-radius) !important;
  background: var(--ui480-surface-raised) !important;
  color: var(--ui480-text) !important;
  -webkit-text-fill-color: var(--ui480-text) !important;
  box-shadow: none !important;
}

html body .wrap :where(.btn.primary, .btn.blue, button.primary):not(:disabled) {
  border-color: var(--ui480-signal) !important;
  background: var(--ui480-signal-deep) !important;
  color: #f2feff !important;
  -webkit-text-fill-color: #f2feff !important;
}

html body .wrap :where(input, select, textarea) {
  border-color: var(--ui480-line) !important;
  border-radius: var(--ui480-inner-radius) !important;
  background: #0a171f !important;
  color: var(--ui480-text) !important;
  -webkit-text-fill-color: var(--ui480-text) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body #portal-root *,
  html body #portal-root *::before,
  html body #portal-root *::after,
  html body #root *,
  html body #root *::before,
  html body #root *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ui481-desktop-final: this product is intentionally desktop-only. Keep one
   stable command-deck canvas at every PC window size; narrow windows scroll
   the same canvas instead of switching to a second mobile information model. */
html,
html body {
  min-width: 1280px !important;
}

html body > #portal-root,
html body > #root {
  box-sizing: border-box !important;
  width: 1280px !important;
  min-width: 1280px !important;
  max-width: none !important;
  margin-inline: auto !important;
  overflow-x: clip !important;
}

html body > #portal-root {
  background: var(--ui480-bg) !important;
}

html body > #root {
  background: var(--ui480-bg) !important;
}

html body #portal-root :is(.portal-mobile-nav, .mobile-nav, .mobile-nav-toggle, .mobile-menu, [data-mobile-only]),
html body #root :is(.geo-mobile-nav-hint, .mobile-portal-link, .mobile-nav, .mobile-nav-toggle, .mobile-nav-actions, .menu-button, .mobile-title, [data-mobile-only]) {
  display: none !important;
}

html body #root .site-header .nav {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body #root .root-shell-loading,
html body #root .public-shell-loading {
  box-sizing: border-box !important;
  width: 1280px !important;
  min-width: 1280px !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding: 72px !important;
}

html body #root :where(h1, h2, h3, h4, p, li, label, input, select, textarea, button, a) {
  letter-spacing: 0 !important;
}

html body #root :where(.site-header, .home-hero, .page-hero-shell, .collection-hero, .product-hero, .solution-hero, .case-hero, .article-hero, .event-hero, .legal-hero, .trust-hero, .reports-hero, .special-hero, .pricing-hero, .contact-page, .content-layout, .site-footer) {
  width: 1120px !important;
  max-width: 1120px !important;
  margin-inline: auto !important;
}

html body #root :where(.site-header, .nav, .header-actions, .polish-actions, .page-hero-actions, .special-actions, .solution-actions, .case-actions, .article-actions, .event-actions, .legal-actions, .trust-actions, .reports-actions, .pricing-actions, .contact-actions) {
  min-width: 0 !important;
}

html body #root :where(.button, .button-dark, .button-light, .button-primary, .root-shell-loading__button) {
  min-height: 40px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}