/* ui485: final PC-only visual system. One cockpit surface, one spacing scale. */
:root {
  --ui485-canvas: 1280px;
  --ui485-rail: 238px;
  --ui485-edge: 12px;
  --ui485-gap: 12px;
  --ui485-bg: #07131b;
  --ui485-deep: #081720;
  --ui485-surface: #0c1b24;
  --ui485-card: #112833;
  --ui485-card-strong: #153444;
  --ui485-line: rgba(190, 224, 235, 0.18);
  --ui485-line-strong: rgba(121, 216, 242, 0.68);
  --ui485-text: #eef7f8;
  --ui485-muted: #a7bbc3;
  --ui485-faint: #78929d;
  --ui485-signal: #79d8f2;
  --ui485-signal-deep: #176579;
  --ui485-good: #8bd5ae;
  --ui485-warn: #e5b86e;
  --ui485-danger: #ed9186;
}

/* Keep a single desktop composition at every viewport width. */
html,
body {
  min-width: var(--ui485-canvas) !important;
  overflow-x: auto !important;
  background: var(--ui485-bg) !important;
  color: var(--ui485-text) !important;
}

html body > #portal-root,
html body > #root {
  width: var(--ui485-canvas) !important;
  min-width: var(--ui485-canvas) !important;
  max-width: none !important;
  margin-inline: auto !important;
  background: var(--ui485-bg) !important;
}

html body :where(.mobile-nav-actions, .mobile-only, [data-mobile-only], [data-mobile-nav], .mobile-portal-link, .mobile-nav-toggle, .geo-mobile-nav-hint) {
  display: none !important;
}

html body #portal-root main.portal-shell,
html body #root main.geo-admin-shell {
  width: var(--ui485-canvas) !important;
  min-width: var(--ui485-canvas) !important;
  max-width: none !important;
  background: var(--ui485-bg) !important;
}

html body #portal-root main.portal-shell {
  grid-template-columns: var(--ui485-rail) minmax(0, 1fr) !important;
  gap: 0 !important;
}

html body #portal-root main.portal-shell .portal-header,
html body #root main.geo-admin-shell .geo-sidebar {
  width: var(--ui485-rail) !important;
  min-width: var(--ui485-rail) !important;
  max-width: var(--ui485-rail) !important;
  box-sizing: border-box !important;
}

html body #portal-root main.portal-shell .portal-content-stage,
html body #root main.geo-admin-shell .geo-content {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  padding: var(--ui485-edge) !important;
}

/* The same vertical rhythm is used by every client and admin module. */
html body #portal-root main.portal-shell .portal-content-stage > *,
html body #root main.geo-admin-shell .geo-content > * {
  min-width: 0 !important;
  max-width: none !important;
  margin-block: 0 var(--ui485-gap) !important;
}

html body #portal-root main.portal-shell :where(
  .page-control-tower,
  .client-core-command-deck,
  .client-command-cockpit,
  .task-pool-cockpit,
  .task-quick-list,
  .command-tools,
  .command-route-board,
  .command-metrics,
  .client-core-command-strip,
  .client-advanced-drawer,
  .client-section-detail-drawer,
  .geo-growth-command-center,
  .executive-report-cockpit,
  .report-delivery-cockpit,
  .report-delivery-console,
  .publisher-command-center,
  .account-command,
  .tracking-command,
  .compliance-sandbox-cockpit,
  .panel
),
html body #root main.geo-admin-shell :where(
  .geo-panel,
  .geo-panel-table,
  .geo-dashboard-card,
  .geo-dashboard-action-card,
  .geo-project-card,
  .geo-report-card,
  .geo-card,
  .geo-list-card,
  .geo-command,
  .geo-control,
  .geo-delivery-console,
  .geo-user-command,
  .admin-dashboard-v2,
  .admin-dashboard-band,
  .admin-dashboard-data,
  .admin-flight-command,
  .geo-empty,
  .geo-notice
) {
  box-sizing: border-box !important;
  min-width: 0 !important;
  border: 1px solid var(--ui485-line) !important;
  border-radius: 8px !important;
  background: var(--ui485-surface) !important;
  background-image: none !important;
  color: var(--ui485-text) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* Old green-black command surfaces are deliberately flattened into the blue
   cockpit palette. This covers hidden panels too, so opening a drawer does not
   reveal a second visual language. */
html body #portal-root main.portal-shell :where(
  .command-metrics,
  .command-route-board,
  .command-tools,
  .client-core-command-strip,
  .task-pool-cockpit,
  .task-quick-list,
  .client-advanced-drawer,
  .client-section-detail-drawer,
  .client-executive-board,
  .geo-growth-command-center,
  .executive-report-cockpit,
  .report-delivery-cockpit,
  .report-delivery-console
),
html body #root main.geo-admin-shell :where(
  .admin-flight-commandbar,
  .geo-delivery-copy,
  .geo-delivery-next,
  .geo-delivery-strip,
  .geo-table-scroll,
  .geo-table,
  .geo-launch-scope,
  .geo-launch-score,
  .geo-launch-blockers,
  .geo-launch-group-grid,
  .geo-launch-item,
  .geo-launch-acceptance,
  .geo-admin-command-status,
  .geo-auto-cruise-badge,
  .geo-logout-button
) {
  background: var(--ui485-surface) !important;
  background-image: none !important;
  border-color: var(--ui485-line) !important;
  border-radius: 8px !important;
}

/* Interior tiles are one level brighter and never inherit random gradients. */
html body #portal-root main.portal-shell :where(
  .command-metrics > *,
  .command-route-board > *,
  .command-tools > *,
  .client-core-command-strip > *,
  .client-core-card-grid > *,
  .client-core-next-grid > *,
  .task-pool-cards > *,
  .task-pool-tower > *,
  .task-quick-card,
  .client-home-kpis > *,
  .client-home-next-grid > *,
  .client-core-card-grid > *,
  .account-focus-deck > *,
  .report-cockpit-grid > *,
  .publisher-platform,
  .publisher-asset-list > *,
  .publisher-job,
  .command-tool-card,
  .command-next-action
),
html body #root main.geo-admin-shell :where(
  .geo-kpi-grid > *,
  .geo-project-grid > *,
  .geo-report-grid > *,
  .geo-health-metrics > *,
  .geo-task-health-grid > *,
  .geo-task-job-grid > *,
  .geo-delivery-cards > *,
  .geo-permission-grid > *,
  .geo-dashboard-actions > *,
  .geo-admin-command-step,
  .geo-launch-blocker,
  .geo-launch-group,
  .geo-user-card,
  .geo-project-card
) {
  min-width: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid var(--ui485-line) !important;
  border-radius: 6px !important;
  background: var(--ui485-card) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body #portal-root main.portal-shell :where(.page-control-actions, .command-deck-actions, .task-pool-actions),
html body #root main.geo-admin-shell :where(.geo-dashboard-actions, .geo-inline-actions, .geo-topbar-actions) {
  border-radius: 8px !important;
}

/* Shared type ladder. Numbers remain prominent; labels remain calm and close. */
html body #portal-root main.portal-shell :where(h1, h2, h3, h4, strong, b),
html body #root main.geo-admin-shell :where(h1, h2, h3, h4, strong, b) {
  color: var(--ui485-text) !important;
  letter-spacing: 0 !important;
}

html body #portal-root main.portal-shell :where(h1, .page-control-hero h1, .client-core-hero h1),
html body #root main.geo-admin-shell :where(h1, .geo-safe-heading, .geo-command h1) {
  font-size: 34px !important;
  line-height: 1.14 !important;
  font-weight: 780 !important;
}

html body #portal-root main.portal-shell :where(h2, .page-control-hero h2, .client-core-hero h2),
html body #root main.geo-admin-shell :where(h2, .geo-command h2) {
  font-size: 24px !important;
  line-height: 1.25 !important;
  font-weight: 760 !important;
}

html body #portal-root main.portal-shell :where(p, li, label, input, select, textarea, button, a),
html body #root main.geo-admin-shell :where(p, li, label, input, select, textarea, button, a) {
  font-size: 13px !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
}

html body #portal-root main.portal-shell :where(small, .muted, .hint, .caption, .meta, .eyebrow, .panel-head small),
html body #root main.geo-admin-shell :where(small, .muted, .hint, .caption, .meta, .geo-copy, .geo-muted, .geo-panel-head small) {
  font-size: 11px !important;
  line-height: 1.5 !important;
  color: var(--ui485-muted) !important;
}

html body #portal-root main.portal-shell :where(.metric-value, .score, .gauge-value, .stat-value, .kpi-value),
html body #root main.geo-admin-shell :where(.metric-value, .score, .gauge-value, .stat-value, .kpi-value) {
  font-size: 28px !important;
  line-height: 1.05 !important;
  font-variant-numeric: tabular-nums !important;
}

/* All controls read as one system: quiet default, cyan primary, amber alert. */
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"]) {
  min-width: 0 !important;
  min-height: 38px !important;
  box-sizing: border-box !important;
  padding: 8px 12px !important;
  border: 1px solid var(--ui485-line) !important;
  border-radius: 6px !important;
  background: var(--ui485-card) !important;
  background-image: none !important;
  color: var(--ui485-text) !important;
  -webkit-text-fill-color: var(--ui485-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, .geo-action-card-button:hover, .geo-action-card-button:focus-visible, a[role="button"]:hover, a[role="button"]:focus-visible) {
  border-color: var(--ui485-line-strong) !important;
  background: var(--ui485-card-strong) !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, .client-ignite-button, .launch-button, .primary-setup-action, .mission-next-main, .publisher-editor-actions .primary, .command-primary-action),
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(--ui485-signal) !important;
  background: var(--ui485-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.12) !important;
}

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

html body #portal-root main.portal-shell :where(.warn, .danger, .failed, .error),
html body #root main.geo-admin-shell :where(.warn, .danger, .failed, .error) {
  border-color: rgba(229, 184, 110, 0.62) !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;
}

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

html body #portal-root main.portal-shell :where(input:focus, select:focus, textarea:focus),
html body #root main.geo-admin-shell :where(input:focus, select:focus, textarea:focus) {
  outline: none !important;
  border-color: var(--ui485-signal) !important;
  box-shadow: 0 0 0 3px rgba(121, 216, 242, 0.14) !important;
}

/* Admin frame and tables use the same working lane as the client. */
html body #root main.geo-admin-shell .geo-workspace {
  min-width: 0 !important;
  width: auto !important;
  padding: 0 !important;
  background: var(--ui485-bg) !important;
  background-image: none !important;
}

html body #root main.geo-admin-shell .geo-content {
  padding: var(--ui485-edge) !important;
}

html body #root main.geo-admin-shell :where(.geo-table-scroll, .geo-table-api, .geo-table-models, .geo-table-run, .geo-table) {
  max-width: 100% !important;
  overflow-x: auto !important;
  background: var(--ui485-deep) !important;
  background-image: none !important;
  border-color: var(--ui485-line) !important;
}

html body #root main.geo-admin-shell table {
  border-collapse: collapse !important;
  background: var(--ui485-deep) !important;
}

html body #root main.geo-admin-shell th {
  background: var(--ui485-card-strong) !important;
  color: var(--ui485-muted) !important;
}

html body #root main.geo-admin-shell td {
  border-color: var(--ui485-line) !important;
  color: var(--ui485-text) !important;
}

html body #root[id][id][id][id][id][id][id][id][id][id][id][id] main.geo-admin-shell :is(
  .admin-flight-commandbar,
  .geo-delivery-copy,
  .geo-delivery-next,
  .geo-delivery-strip,
  .geo-table-scroll,
  .geo-table,
  .geo-launch-scope,
  .geo-launch-score,
  .geo-launch-overall,
  .geo-launch-blockers,
  .geo-launch-group-grid,
  .geo-launch-item,
  .geo-launch-acceptance,
  .geo-admin-command-status,
  .geo-auto-cruise-badge,
  .geo-logout-button
) {
  border-color: var(--ui485-line) !important;
  border-radius: 8px !important;
  background: var(--ui485-surface) !important;
  background-image: none !important;
  color: var(--ui485-text) !important;
}

html body #root[id][id][id][id][id][id][id][id][id][id][id][id] main.geo-admin-shell :is(
  .geo-workspace,
  .geo-content,
  .geo-table-scroll,
  .geo-table,
  .geo-delivery-copy,
  .geo-delivery-next,
  .geo-delivery-strip,
  .geo-launch-scope,
  .geo-launch-score,
  .geo-launch-overall,
  .geo-launch-blockers,
  .geo-launch-group-grid,
  .geo-launch-item,
  .geo-launch-acceptance,
  .admin-flight-commandbar,
  .geo-admin-command-status
) :is(header, th, td, label, .geo-pill, .geo-panel-action) {
  background: var(--ui485-card) !important;
  background-image: none !important;
  border-color: var(--ui485-line) !important;
  color: var(--ui485-text) !important;
}

html body #root[id][id][id][id][id][id][id][id][id][id][id][id] main.geo-admin-shell :is(
  .geo-workspace,
  .geo-content
) {
  background: var(--ui485-bg) !important;
  background-image: none !important;
}

html body #root[id][id][id][id][id][id][id][id][id][id][id][id] main.geo-admin-shell .geo-sync-status.ok {
  border-color: rgba(121, 216, 242, 0.42) !important;
  background: rgba(121, 216, 242, 0.08) !important;
  color: var(--ui485-signal) !important;
}

html body #root[id][id][id][id][id][id][id][id][id][id][id][id] main.geo-admin-shell :is(
  .geo-kpi,
  .geo-nav-group > summary,
  .geo-nav-children button,
  .geo-panel-action,
  .geo-pill
)::before,
html body #root[id][id][id][id][id][id][id][id][id][id][id][id] main.geo-admin-shell :is(
  .geo-kpi,
  .geo-nav-group > summary,
  .geo-nav-children button,
  .geo-panel-action,
  .geo-pill
)::after {
  background: transparent !important;
  background-image: none !important;
  border-color: rgba(121, 216, 242, 0.28) !important;
  color: var(--ui485-signal) !important;
}

/* A few legacy drawers carry repeated-ID selectors; match that specificity so
   their closed and open states cannot reintroduce the old green surface. */
html body #portal-root#portal-root#portal-root#portal-root#portal-root :where(.status-actions, .client-advanced-drawer, .client-section-detail-drawer),
html body #portal-root#portal-root#portal-root#portal-root#portal-root :where(.client-advanced-drawer > summary, .client-section-detail-drawer > summary) {
  border-color: var(--ui485-line) !important;
  border-radius: 8px !important;
  background: var(--ui485-surface) !important;
  background-image: none !important;
  color: var(--ui485-text) !important;
}

html body #portal-root#portal-root#portal-root#portal-root#portal-root :where(.status-actions > *, .client-advanced-drawer > summary > *, .client-section-detail-drawer > summary > *) {
  border-color: var(--ui485-line) !important;
  background: var(--ui485-card) !important;
  background-image: none !important;
  color: var(--ui485-text) !important;
  -webkit-text-fill-color: var(--ui485-text) !important;
}

html body #portal-root#portal-root#portal-root#portal-root#portal-root#portal-root#portal-root#portal-root#portal-root#portal-root#portal-root#portal-root :where(.status-actions, .client-advanced-drawer, .client-section-detail-drawer, .client-advanced-drawer > summary, .client-section-detail-drawer > summary) {
  border-color: var(--ui485-line) !important;
  border-radius: 8px !important;
  background: var(--ui485-surface) !important;
  background-image: none !important;
}

html body #portal-root#portal-root#portal-root#portal-root#portal-root#portal-root#portal-root#portal-root#portal-root#portal-root#portal-root#portal-root :where(.status-actions > *, .client-advanced-drawer > summary > *, .client-section-detail-drawer > summary > *) {
  border-color: var(--ui485-line) !important;
  border-radius: 6px !important;
  background: var(--ui485-card) !important;
  background-image: none !important;
  color: var(--ui485-text) !important;
  -webkit-text-fill-color: var(--ui485-text) !important;
}

/* Attribute repetition keeps the override valid in strict CSS parsers while
   still outranking the legacy compatibility selectors. */
html body #portal-root[id][id][id][id][id][id][id][id][id] :where(.status-actions, .client-advanced-drawer, .client-section-detail-drawer, .client-advanced-drawer > summary, .client-section-detail-drawer > summary) {
  border-color: var(--ui485-line) !important;
  border-radius: 8px !important;
  background: var(--ui485-surface) !important;
  background-image: none !important;
  color: var(--ui485-text) !important;
}

html body #portal-root[id][id][id][id][id][id][id][id][id] :where(.status-actions > *, .client-advanced-drawer > summary > *, .client-section-detail-drawer > summary > *) {
  border-color: var(--ui485-line) !important;
  border-radius: 6px !important;
  background: var(--ui485-card) !important;
  background-image: none !important;
  color: var(--ui485-text) !important;
  -webkit-text-fill-color: var(--ui485-text) !important;
}

/* State feedback is short and directional; idle screens stay still. */
html body #portal-root main.portal-shell[data-cockpit-busy="true"] .cockpit-launch-action,
html body #root main.geo-admin-shell[data-cockpit-busy="true"] .cockpit-launch-action {
  animation: ui485-action-ready 420ms ease-out both;
}

html body #portal-root main.portal-shell[data-cockpit-ignition="launching"] .cockpit-launch-action,
html body #root main.geo-admin-shell[data-cockpit-busy="true"] .geo-action-card-button.primary {
  animation: ui485-action-launch 520ms cubic-bezier(0.22, 0.8, 0.25, 1) both;
}

@keyframes ui485-action-ready {
  from { box-shadow: 0 0 0 rgba(121, 216, 242, 0); }
  to { box-shadow: 0 0 0 3px rgba(121, 216, 242, 0.12), 0 8px 18px rgba(23, 101, 121, 0.24); }
}

@keyframes ui485-action-launch {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-1px) scale(1.018); }
  100% { transform: translateY(0) scale(1); }
}

@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;
  }
}