/* Product secondary navigation: route, product destinations, then resources.
   This page owner loads after the shared context and developer-flow styles. */
:is(#api-secondary-navigation, #product-secondary-navigation, #mail-secondary-navigation, #system-secondary-navigation) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  gap: 12px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  padding: 12px 0 !important;
}
:is(#api-secondary-navigation, #product-secondary-navigation, #mail-secondary-navigation, #system-secondary-navigation) > .route-context,
:is(#api-secondary-navigation, #product-secondary-navigation, #mail-secondary-navigation, #system-secondary-navigation) > .kapx-product-nav,
:is(#api-secondary-navigation, #product-secondary-navigation, #mail-secondary-navigation, #system-secondary-navigation) > .developer-resource-rail {
  position: static !important;
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  box-sizing: border-box;
  overflow: visible !important;
}
:is(#api-secondary-navigation, #product-secondary-navigation, #mail-secondary-navigation, #system-secondary-navigation) > .route-context {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 12px !important;
}
:is(#api-secondary-navigation, #product-secondary-navigation, #mail-secondary-navigation, #system-secondary-navigation) .breadcrumb,
:is(#api-secondary-navigation, #product-secondary-navigation, #mail-secondary-navigation, #system-secondary-navigation) .route-context-meta {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  height: auto !important;
  min-width: 0;
}
:is(#api-secondary-navigation, #product-secondary-navigation, #mail-secondary-navigation, #system-secondary-navigation) .breadcrumb {
  width: auto !important;
  max-width: 100% !important;
  flex: 0 1 auto !important;
  overflow: visible !important;
  white-space: normal !important;
  margin: 0 !important;
  padding: 0 !important;
}
:is(#api-secondary-navigation, #product-secondary-navigation, #mail-secondary-navigation, #system-secondary-navigation) .breadcrumb > * { flex: 0 0 auto; }
:is(#api-secondary-navigation, #product-secondary-navigation, #mail-secondary-navigation, #system-secondary-navigation) > .kapx-product-nav {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  padding: 0 !important;
  border: 0;
}
:is(#api-secondary-navigation, #product-secondary-navigation, #mail-secondary-navigation, #system-secondary-navigation) > .kapx-product-nav a {
  min-width: 0;
  min-height: 64px;
  padding: 10px 12px;
  box-sizing: border-box;
  text-decoration: none;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.6;
}
:is(#api-secondary-navigation, #product-secondary-navigation, #mail-secondary-navigation, #system-secondary-navigation) > .developer-resource-rail {
  padding: 0 !important;
  border: 1px solid var(--line);
  border-radius: 8px;
}
:is(#api-secondary-navigation, #product-secondary-navigation, #mail-secondary-navigation, #system-secondary-navigation) > .developer-resource-rail > summary {
  padding: 12px 14px;
  min-height: 44px;
  box-sizing: border-box;
  margin: 0;
  cursor: pointer;
}
:is(#api-secondary-navigation, #product-secondary-navigation, #mail-secondary-navigation, #system-secondary-navigation) .developer-flow-nav {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 0 12px 12px !important;
}
:is(#api-secondary-navigation, #product-secondary-navigation, #mail-secondary-navigation, #system-secondary-navigation) .developer-flow-nav ol {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  height: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
:is(#api-secondary-navigation, #product-secondary-navigation, #mail-secondary-navigation, #system-secondary-navigation) .developer-flow-item,
:is(#api-secondary-navigation, #product-secondary-navigation, #mail-secondary-navigation, #system-secondary-navigation) .developer-flow-link {
  min-width: 0 !important;
  height: auto !important;
  overflow: visible !important;
}
:is(#api-secondary-navigation, #product-secondary-navigation, #mail-secondary-navigation, #system-secondary-navigation) .developer-flow-link {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: start;
  gap: 8px !important;
  padding: 10px !important;
  text-decoration: none;
}
:is(#api-secondary-navigation, #product-secondary-navigation, #mail-secondary-navigation, #system-secondary-navigation) .developer-flow-label {
  white-space: normal !important;
  overflow-wrap: anywhere;
}
:is(#api-secondary-navigation, #product-secondary-navigation, #mail-secondary-navigation, #system-secondary-navigation) .developer-flow-status { grid-column: 2; }
:is(#api-secondary-navigation, #product-secondary-navigation, #mail-secondary-navigation, #system-secondary-navigation) .developer-resource-rail .context-local-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  grid-column: auto !important;
  grid-row: auto !important;
  height: auto !important;
  width: auto !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 12px !important;
  border-bottom: 1px solid var(--line);
}
:is(#api-secondary-navigation, #product-secondary-navigation, #mail-secondary-navigation, #system-secondary-navigation) .developer-resource-rail .local-nav-link {
  display: flex !important;
  align-items: center;
  height: auto !important;
  white-space: normal !important;
  padding: 8px 12px !important;
  font-size: 14px;
}
:is(#api-secondary-navigation, #product-secondary-navigation, #mail-secondary-navigation, #system-secondary-navigation) a:focus-visible,
:is(#api-secondary-navigation, #product-secondary-navigation, #mail-secondary-navigation, #system-secondary-navigation) summary:focus-visible {
  outline: 2px solid var(--rgbm-navigation, #82baff);
  outline-offset: 3px;
}
@media (max-width: 1100px) {
  :is(#api-secondary-navigation, #product-secondary-navigation, #mail-secondary-navigation, #system-secondary-navigation) > .kapx-product-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  :is(#api-secondary-navigation, #product-secondary-navigation, #mail-secondary-navigation, #system-secondary-navigation) > .kapx-product-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px;
  }
  :is(#api-secondary-navigation, #product-secondary-navigation, #mail-secondary-navigation, #system-secondary-navigation) > .kapx-product-nav a { flex: 0 0 160px; min-height: 60px; }
  :is(#api-secondary-navigation, #product-secondary-navigation, #mail-secondary-navigation, #system-secondary-navigation) .route-context-meta { display: none !important; }
  :is(#api-secondary-navigation, #product-secondary-navigation, #mail-secondary-navigation, #system-secondary-navigation) .developer-resource-rail[open] { max-height: 180px !important; overflow: auto !important; }
  :is(#api-secondary-navigation, #product-secondary-navigation, #mail-secondary-navigation, #system-secondary-navigation) .developer-flow-nav ol { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Shared compact developer shell v1 — enrolled explicitly in page.html.
   Only the global header reserves viewport height. Breadcrumb, disclosure,
   KAP controls and footer belong to the SAME main and scroll out of view.
   New pages must opt in and pass developer-compact-shell.test.js. */
html:has(body[data-developer-shell="compact-v1"]) {height:100%; overflow:hidden;}
html body[data-template][data-page][data-route][data-dgrid-layout][data-developer-shell="compact-v1"] {
  display:flex !important; flex-direction:column !important;
  height:100dvh !important; min-height:0 !important; overflow:hidden !important;
}
body[data-developer-shell="compact-v1"] > header.site {
  position:relative !important; top:auto !important; flex:0 0 auto !important;
}
body[data-developer-shell="compact-v1"] > .xgrid-coordinate-rail {display:none !important;}
html body[data-template][data-page][data-route][data-dgrid-layout][data-developer-shell="compact-v1"] > .wrap:not(.topbar) {
  display:flex !important; flex:1 1 0 !important; flex-direction:column !important;
  width:100% !important; max-width:none !important; min-height:0 !important;
  height:auto !important; padding:0 !important; margin:0 !important; gap:0 !important; overflow:hidden !important;
}
html body[data-template][data-page][data-route][data-dgrid-layout][data-developer-shell="compact-v1"] > .wrap > main:is(#system-detail-kap-grid,#api-kap-grid-viewport,#development-kap-grid-viewport,#early-access-kap-grid-viewport,#build-kap-grid-viewport,#development-connect-kap-grid-viewport,#development-download-kap-grid-viewport,#preview-kap-grid-viewport,#technology-kap-grid-viewport)[data-developer-viewport] {
  display:block !important; position:relative !important; flex:1 1 0 !important;
  width:100% !important; max-width:none !important; height:auto !important;
  min-height:0 !important; margin:0 !important; padding:0 !important; transform:none !important;
  overflow-y:auto !important; overflow-x:clip !important; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--rgbm-navigation,#82baff) transparent;
}
body[data-developer-shell="compact-v1"] main[data-developer-viewport] > * {
  grid-area:auto !important; min-width:0; box-sizing:border-box;
}
html body[data-template][data-page][data-route][data-dgrid-layout][data-developer-shell="compact-v1"] :is(#api-secondary-navigation,#product-secondary-navigation,#mail-secondary-navigation, #system-secondary-navigation)[data-context-bar] {
  position:static !important; display:block !important; height:auto !important;
  min-height:0 !important; padding:4px 12px !important; margin:0 !important;
}
html body[data-template][data-page][data-developer-shell="compact-v1"] :is(#api-secondary-navigation,#product-secondary-navigation,#mail-secondary-navigation, #system-secondary-navigation) > .route-context {
  padding:4px 0 !important; min-height:0 !important;
}
body[data-developer-shell="compact-v1"] [data-developer-navigation] {
  width:100%; margin:0; border:1px solid var(--line); border-radius:8px;
}
body[data-developer-shell="compact-v1"] [data-developer-navigation] > summary {
  min-height:44px; padding:10px 12px; box-sizing:border-box; cursor:pointer;
  color:var(--rgbm-navigation,#82baff); font-size:14px; line-height:1.6;
}
body[data-developer-shell="compact-v1"] [data-developer-navigation] .kapx-product-nav {
  position:static !important; display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  width:auto !important; height:auto !important; min-height:0 !important;
  padding:8px !important; margin:0 !important; gap:8px !important; overflow:visible !important;
}
body[data-developer-shell="compact-v1"] [data-developer-navigation] .kapx-product-nav a {
  min-width:0; min-height:44px; white-space:normal; overflow-wrap:anywhere;
}
body[data-developer-shell="compact-v1"] [data-developer-navigation] .developer-resource-rail {
  position:static !important; width:auto !important; max-height:none !important;
  margin:0 !important; padding:0 !important; overflow:visible !important;
}
body[data-template][data-page][data-developer-shell="compact-v1"] main[data-developer-viewport] > :is(.product-kap-toolbar,.development-kap-toolbar,.build-kap-toolbar,.earlyaccess-kap-toolbar) {
  position:static !important; top:auto !important; display:flex !important; flex-wrap:wrap !important;
  width:auto !important; min-height:0 !important; padding:4px 12px !important;
}
/* Updating the semantic coordinate must not change the scroll range at End. */
body[data-template][data-page][data-developer-shell="compact-v1"] main[data-developer-viewport] .kap-grid-status {
  min-width:0 !important; max-width:min(26ch,40vw);
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis;
}
body[data-developer-shell="compact-v1"] main[data-developer-viewport] footer.site {
  position:static !important; width:100% !important; height:auto !important;
  min-height:0 !important; margin-top:24px !important; overflow:visible !important;
}
body[data-developer-shell="compact-v1"] main[data-developer-viewport] footer.site .footer-links {flex-wrap:wrap;}
@media(max-width:640px) {
  body[data-developer-shell="compact-v1"] :is(#api-secondary-navigation,#product-secondary-navigation,#mail-secondary-navigation, #system-secondary-navigation) .breadcrumb {
    flex-wrap:nowrap !important; white-space:nowrap !important; overflow:hidden !important;
    width:100% !important; gap:6px !important;
  }
  body[data-developer-shell="compact-v1"] :is(#api-secondary-navigation,#product-secondary-navigation,#mail-secondary-navigation, #system-secondary-navigation) .breadcrumb > * {
    flex:0 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  body[data-developer-shell="compact-v1"] main[data-developer-viewport] > .product-kap-toolbar :is(.kap-grid-controls-label,output) {display:none;}
  body[data-developer-shell="compact-v1"] [data-developer-navigation] .kapx-product-nav {grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}