/* AENET KAP-GRID scroll adapter (v2).
 * KGRID owns identity, DGRID owns placement, and this file owns the
 * explicit scroll surface/control presentation. Wheel deltas are accumulated
 * per animation frame and written directly so trackpads and mouse wheels share
 * one fast, stable path.
 * Native document scrolling is not used when a surface declares
 * data-kap-grid-scroll="true".
 */
[data-kap-grid-scroll="true"] {
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
  scrollbar-gutter: auto !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* KAP-GRID owns motion; CSS smooth queues make repeated wheel/control input
   * lag behind the pointer. Anchor links may still request smooth explicitly. */
  scroll-behavior: auto;
}

/* KAP-GRID XY surfaces own both axes; the document/browser remains outside
 * the navigation contract while the surface is scrolled by wheel, keys, or
 * explicit controls. */
[data-kap-grid-scroll="true"][data-kap-grid-axis="xy"],
[data-kap-grid-scroll="true"][data-kap-grid-axis="both"] {
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: contain;
  touch-action: pan-x pan-y;
}

[data-kap-grid-scroll="true"]::-webkit-scrollbar {
  width: 0;
  height: 0;
}

[data-kap-grid-scroll="true"]:focus-visible {
  outline: 1px solid var(--rgbm-cyan, #35e0e0);
  outline-offset: -1px;
}

.kap-grid-controls {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 3px 5px;
  border: 1px solid color-mix(in srgb, var(--rgbm-green, #35e0a1) 32%, var(--line, #1e2c49));
  border-radius: 4px;
  background: rgba(7, 12, 24, .7);
  color: var(--muted, #94a3b8);
}

.kap-grid-controls-label {
  color: var(--rgbm-green, #35e0a1);
  white-space: nowrap;
}

.kap-grid-button {
  min-width: 24px;
  min-height: 20px;
  padding: 2px 5px;
  border: 1px solid color-mix(in srgb, var(--rgbm-green, #35e0a1) 38%, var(--line, #1e2c49));
  border-radius: 3px;
  background: rgba(16, 26, 46, .75);
  color: var(--text, #e2e8f0);
  /* FGRID.NAV.UTILITY tokens — controls must not invent a second font scale. */
  font-family: var(--f-font-mono, var(--mono, monospace));
  font-size: var(--f-size-03, 12px);
  font-weight: var(--f-weight-medium, 500);
  line-height: var(--f-line-tight, 1.18);
  letter-spacing: var(--f-track-code, .06em);
  cursor: pointer;
}

.kap-grid-button:hover,
.kap-grid-button:focus-visible {
  border-color: var(--rgbm-green, #35e0a1);
  color: var(--rgbm-green, #35e0a1);
  outline: none;
}

.kap-grid-status {
  min-width: 28px;
  color: var(--rgbm-current, var(--rgbm-cyan, #35e0e0));
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.kap-grid-status[data-rgbm]::after { display: none; }

/* Home's main KAP-GRID viewport owns every page section, so its controls
 * remain reachable while the coordinate map moves underneath them. */
body[data-page="home"] .home-display-toolbar > .kap-grid-controls {
  position: sticky !important;
  top: 0;
  z-index: 5;
  width: max-content;
  margin: 0 0 6px auto;
}

/* Systems keeps a fixed DGRID workstation at expanded widths. The complete
 * registry is the one KAP-GRID surface; header, atlas and status rails stay
 * in the fixed canvas while the directory is navigated by the controls. */
@media (min-width: 1200px) {
  body[data-page="systems"] .systems-directory {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  body[data-page="systems"] .systems-directory .systems-section-head {
    min-width: 0;
    display: flex;
    align-items: center;
  }

  body[data-page="systems"] .systems-directory .kap-grid-controls {
    margin-left: auto;
    flex: 0 0 auto;
  }

  body[data-page="systems"] .systems-directory-grid[data-kap-grid-scroll="true"] {
    min-height: 0;
    height: auto;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    align-content: start;
  }
}

@media (max-width: 1199px) {
  body[data-page="systems"] .kap-grid-controls {
    width: 100%;
    justify-content: flex-end;
    margin-top: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-kap-grid-scroll="true"] { scroll-behavior: auto; }
}