/* AENET shared Developers flow — bounded DGRID/KGRID context rail.
 * Scope is intentionally limited to pages that expose both the shared
 * developer-flow navigation and an element-owned KAP-GRID viewport. */

html:has(body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav)) {
  height: 100vh !important;
  overflow: hidden !important;
}

body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav) {
  height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav) > .wrap {
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav) > .wrap > .context-bar {
  flex: 0 0 78px !important;
  height: 78px !important;
  min-height: 0 !important;
  margin: 0 0 8px !important;
  padding: 4px 0 !important;
  display: grid !important;
  grid-template-columns: minmax(210px, .34fr) minmax(0, 1fr) !important;
  gap: 8px !important;
  overflow: hidden !important;
  position: static !important;
}

body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav) > .wrap > .context-bar .route-context {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 7px 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: hidden !important;
  border: 1px solid var(--line) !important;
  background: color-mix(in srgb, var(--panel) 82%, var(--bg)) !important;
}

body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav) > .wrap > .context-bar .breadcrumb {
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav) > .wrap > .context-bar .route-context-meta {
  flex: 0 0 auto !important;
  max-width: 42% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav) > .wrap > .context-bar .developer-flow-nav {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 4px !important;
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  gap: 6px !important;
  align-items: center !important;
  overflow: hidden !important;
  border: 1px solid var(--line) !important;
  border-radius: 5px !important;
  background: color-mix(in srgb, var(--panel) 82%, var(--bg)) !important;
}

body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav) > .wrap > .context-bar .developer-flow-title {
  min-width: 0 !important;
  color: var(--muted) !important;
  font: var(--f-weight-semibold) var(--f-size-02)/var(--f-line-tight) var(--f-font-mono) !important;
  letter-spacing: var(--f-track-wider) !important;
  white-space: nowrap !important;
}

body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav) > .wrap > .context-bar .developer-flow-nav ol {
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 3px !important;
  list-style: none !important;
}

body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav) > .wrap > .context-bar .developer-flow-item,
body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav) > .wrap > .context-bar .developer-flow-link {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
}

body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav) > .wrap > .context-bar .developer-flow-item {
  border: 1px solid color-mix(in srgb, var(--rgbm-navigation) 32%, var(--line)) !important;
  background: color-mix(in srgb, var(--rgbm-navigation) 7%, var(--bg)) !important;
}

body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav) > .wrap > .context-bar .developer-flow-link {
  padding: 4px 5px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 4px !important;
  color: var(--muted) !important;
  text-decoration: none !important;
}

body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav) > .wrap > .context-bar .developer-flow-label {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font: var(--f-weight-semibold) var(--f-size-02)/var(--f-line-tight) var(--f-font-sans) !important;
}

body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav) > .wrap > .context-bar .developer-flow-code {
  font: var(--f-weight-semibold) var(--f-size-02)/var(--f-line-tight) var(--f-font-mono) !important;
  color: var(--rgbm-navigation) !important;
}

body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav) > .wrap > .context-bar .developer-flow-item.active {
  border-color: var(--rgbm-system) !important;
  background: color-mix(in srgb, var(--rgbm-system) 13%, var(--bg)) !important;
}

body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav) > .wrap > .context-bar .developer-flow-item.active .developer-flow-link {
  color: var(--text) !important;
}

body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav) > .wrap > main.content-field {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

@media (max-width: 767px) {
  body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav) > .wrap > .context-bar {
    flex-basis: 96px !important;
    height: 96px !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 38px 50px !important;
    gap: 6px !important;
    padding: 4px 0 !important;
  }

  body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav) > .wrap > .context-bar .route-context {
    height: 38px !important;
  }

  body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav) > .wrap > .context-bar .route-context-meta {
    display: none !important;
  }

  body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav) > .wrap > .context-bar .developer-flow-nav {
    height: 50px !important;
    grid-template-columns: 1fr !important;
    padding: 3px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav) > .wrap > .context-bar .developer-flow-title {
    display: none !important;
  }

  body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav) > .wrap > .context-bar .developer-flow-nav ol {
    width: max-content !important;
    min-width: 720px !important;
    height: 42px !important;
    display: grid !important;
    grid-template-columns: repeat(8, 88px) !important;
    gap: 3px !important;
  }
}

/* Development also has a page-local navigation layer. Keep it as a bounded
 * first row and place the shared D01–D08 flow on a second row instead of
 * letting it fall into an implicit grid row with a 10px height. */
@media (min-width: 768px) {
  body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav):has(.context-local-nav) > .wrap > .context-bar {
    flex-basis: 132px !important;
    height: 132px !important;
    grid-template-columns: minmax(210px, .34fr) minmax(0, 1fr) !important;
    grid-template-rows: 58px 64px !important;
  }

  body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav):has(.context-local-nav) > .wrap > .context-bar .route-context {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav):has(.context-local-nav) > .wrap > .context-bar .context-local-nav {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 4px !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 3px !important;
    overflow: hidden !important;
    border: 1px solid var(--line) !important;
    background: color-mix(in srgb, var(--panel) 82%, var(--bg)) !important;
  }

  body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav):has(.context-local-nav) > .wrap > .context-bar .local-nav-link {
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    padding: 4px 6px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav):has(.context-local-nav) > .wrap > .context-bar .developer-flow-nav {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
}

@media (max-width: 767px) {
  body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav):has(.context-local-nav) > .wrap > .context-bar {
    flex-basis: 140px !important;
    height: 140px !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 38px 42px 50px !important;
  }

  body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav):has(.context-local-nav) > .wrap > .context-bar .route-context {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav):has(.context-local-nav) > .wrap > .context-bar .context-local-nav {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 3px !important;
    display: flex !important;
    gap: 3px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 1px solid var(--line) !important;
    background: color-mix(in srgb, var(--panel) 82%, var(--bg)) !important;
  }

  body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav):has(.context-local-nav) > .wrap > .context-bar .local-nav-link {
    flex: 0 0 118px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    padding: 4px 6px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  body:has(main.content-field[data-kap-grid-scroll="true"]):has(.developer-flow-nav):has(.context-local-nav) > .wrap > .context-bar .developer-flow-nav {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }
}