/* AENET shared Topbar submenu projection (DGRID.TOPBAR.V2).
 * All desktop mega menus use the same 24-column panel surface. The registry
 * still owns menu identity and KGRID coordinates; this adapter owns only the
 * visual projection so route-specific CSS cannot fall back to the old 360px
 * one-column dropdown.
 */
@media (min-width: 1200px) {
  header.site[data-global-header] .mega-panel.is-anchored {
    display: grid !important;
    grid-template-columns: repeat(24, minmax(0, 1fr)) !important;
    grid-auto-rows: max-content;
    align-content: start;
    gap: 12px;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--rgbm-insight, #d66bff) 58%, var(--nav-border, #31466d));
    border-radius: 0 0 12px 12px;
    background:
      linear-gradient(180deg, rgba(16, 29, 52, .985), rgba(8, 16, 30, .985)),
      repeating-linear-gradient(90deg, rgba(77, 163, 255, .07) 0 1px, transparent 1px 50px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(53, 224, 224, .12);
  }

  header.site[data-global-header] .mega-panel.is-anchored > .mega-panel-meta {
    grid-column: 1 / -1;
    min-width: 0;
    margin: 0;
    padding: 0 0 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--rgbm-insight, #d66bff) 32%, var(--nav-border, #31466d));
    color: var(--f-color-nav-utility, var(--text-dim));
    font-family: var(--f-font-mono, var(--mono, ui-monospace, monospace));
  }

  /* Menu groups are DGRID content blocks. Three blocks per row keeps the
   * visual rhythm identical for Systems, Solutions, Services, Knowledge,
   * Developers, and Evidence while allowing each list to grow naturally. */
  header.site[data-global-header] .mega-panel.is-anchored > .mega-group {
    grid-column: span 8;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--rgbm-insight, #d66bff) 25%, var(--nav-border, #31466d));
    border-radius: 8px;
    background: rgba(10, 21, 39, .72);
  }

  header.site[data-global-header] .mega-panel.is-anchored > .mega-group .mega-group-label {
    min-width: 0;
    margin: 0 0 8px;
    color: var(--f-color-nav-group, var(--rgbm-system, #35e0e0));
    font-family: var(--f-font-mono, var(--mono, ui-monospace, monospace));
    font-size: var(--f-size-02, 12px);
    line-height: var(--f-line-tight, 1.2);
    letter-spacing: .06em;
  }

  header.site[data-global-header] .mega-panel.is-anchored > .mega-group .mega-group-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    grid-auto-flow: row;
    grid-auto-rows: max-content;
    gap: 5px;
    min-width: 0;
  }

  header.site[data-global-header] .mega-panel.is-anchored .mega-item {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    align-items: center;
    min-width: 0;
    min-height: 40px;
    gap: 8px;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--f-color-nav-item, var(--text));
    font-family: var(--f-font-sans, var(--sans, system-ui, sans-serif));
    font-size: var(--f-size-03, 13px);
    line-height: var(--f-line-normal, 1.35);
  }

  header.site[data-global-header] .mega-panel.is-anchored .mega-item:hover,
  header.site[data-global-header] .mega-panel.is-anchored .mega-item:focus-visible {
    border-color: color-mix(in srgb, var(--rgbm-navigation, #4da3ff) 70%, transparent);
    background: color-mix(in srgb, var(--rgbm-navigation, #4da3ff) 14%, transparent);
    color: var(--text);
    outline: none;
  }

  header.site[data-global-header] .mega-panel.is-anchored .mega-item-coordinate,
  header.site[data-global-header] .mega-panel.is-anchored .mega-item-status {
    font-family: var(--f-font-mono, var(--mono, ui-monospace, monospace));
    font-size: var(--f-size-01, 10px);
    line-height: var(--f-line-tight, 1.2);
  }

  header.site[data-global-header] .mega-panel.is-anchored .mega-item-name {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  header.site[data-global-header] .mega-panel.is-anchored > .mega-view-all {
    grid-column: 1 / -1;
    margin: 0;
    padding: 9px 10px 0;
    border-top: 1px solid color-mix(in srgb, var(--rgbm-insight, #d66bff) 25%, var(--nav-border, #31466d));
  }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  header.site[data-global-header] .mega-panel.is-anchored > .mega-group {
    grid-column: span 12;
  }
}

/* Drawer/compact projections keep the same panel contract in normal flow.
 * They collapse the 24-cell desktop surface to the repository's 12/4
 * responsive grids instead of reverting to the legacy floating dropdown. */
@media (max-width: 1199px) {
  header.site[data-global-header] nav.topnav .mega-panel {
    position: static !important;
    inset: auto !important;
    display: none;
    width: 100% !important;
    min-width: 0;
    max-width: none;
    max-height: 0 !important;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: max-content;
    gap: 10px;
    margin: 6px 0 0;
    padding: 12px;
    border-radius: 8px;
    overflow: hidden !important;
  }

  header.site[data-global-header] nav.topnav .nav-item-menu.is-open > .mega-panel,
  header.site[data-global-header] nav.topnav .nav-item-menu:focus-within > .mega-panel {
    display: grid !important;
    max-height: 56vh !important;
    opacity: 1;
    visibility: visible;
    transform: none;
    overflow-y: auto !important;
  }

  header.site[data-global-header] nav.topnav .mega-panel > .mega-panel-meta,
  header.site[data-global-header] nav.topnav .mega-panel > .mega-view-all {
    grid-column: 1 / -1;
  }

  header.site[data-global-header] nav.topnav .mega-panel > .mega-group {
    grid-column: span 6;
    min-width: 0;
    height: auto;
    margin: 0;
  }

  header.site[data-global-header] nav.topnav .mega-panel .mega-group-items {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  header.site[data-global-header] nav.topnav .mega-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 10px;
  }

  header.site[data-global-header] nav.topnav .mega-panel > .mega-group {
    grid-column: 1 / -1;
  }

  header.site[data-global-header] nav.topnav .mega-panel .mega-group-items {
    grid-template-columns: 1fr !important;
  }
}

/* RGBM menu accents are painted after the responsive panel reset above so
 * the role color survives the shared transparent item border declaration. */
header.site[data-global-header] .mega-panel .mega-item[data-rgbm-role="navigation"] { --topbar-rgbm: var(--rgbm-navigation); }
header.site[data-global-header] .mega-panel .mega-item[data-rgbm-role="action"] { --topbar-rgbm: var(--rgbm-action); }
header.site[data-global-header] .mega-panel .mega-item[data-rgbm-role="insight"] { --topbar-rgbm: var(--rgbm-insight); }
header.site[data-global-header] .mega-panel .mega-item[data-rgbm-role="guard"] { --topbar-rgbm: var(--rgbm-guard); }
header.site[data-global-header] .mega-panel .mega-item[data-rgbm-role="system"] { --topbar-rgbm: var(--rgbm-system); }
header.site[data-global-header] .mega-panel .mega-item[data-rgbm-role="warning"] { --topbar-rgbm: var(--rgbm-warning); }
header.site[data-global-header] .mega-panel .mega-item[data-rgbm-role="data"] { --topbar-rgbm: var(--rgbm-data); }
header.site[data-global-header] .mega-panel .mega-item[data-rgbm-role="neutral"] { --topbar-rgbm: var(--rgbm-neutral); }
header.site[data-global-header] .mega-panel .mega-item[data-rgbm-role] {
  border-inline-start: 2px solid color-mix(in srgb, var(--topbar-rgbm) 76%, transparent);
}
header.site[data-global-header] .mega-panel .mega-item[data-rgbm-role]:hover,
header.site[data-global-header] .mega-panel .mega-item[data-rgbm-role]:focus-visible {
  border-color: color-mix(in srgb, var(--topbar-rgbm) 78%, transparent);
  border-inline-start-color: var(--topbar-rgbm);
  background: color-mix(in srgb, var(--topbar-rgbm) 12%, transparent);
}
header.site[data-global-header] .mega-panel .mega-item.mega-item-planned,
header.site[data-global-header] .mega-panel .mega-item-status[data-status="planned"] {
  --topbar-rgbm: var(--rgbm-warning);
  color: var(--rgbm-warning);
}

/* Shared shell collision guard.
 * The global header already owns the top shell row. Keeping the route context
 * in normal flow prevents sticky top offsets from shifting it over N30/main
 * on fixed-shell and KAP-GRID pages. Page navigation remains visible and
 * scrollable with its owning workspace instead of covering content below. */
body[data-template] .context-bar {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  z-index: auto !important;
}