/* DGRID shared viewport adapter. Owner: _control/dgrid/DGRID_SPEC.json.
 * Loaded after page adapters; KGRID identity/placement and FGRID typography
 * stay intact. One frame, gutter and gap across all generated routes.
 */
:root {
  --dgrid-columns: 24;
  --dgrid-page-gutter: var(--k-page-gutter, clamp(16px, 2vw, 32px));
  --dgrid-page-gap: var(--k-space-K4, 16px);
}
html body[data-template][data-dgrid-layout] {
  min-width: 0;
  width: 100%;
}
html body[data-template][data-dgrid-layout] > .wrap:not(.topbar),
html body[data-template][data-dgrid-layout] header.site > .wrap.topbar,
html body[data-template][data-dgrid-layout] footer.site > .wrap {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  margin-inline: 0 !important;
  padding-inline: max(var(--dgrid-page-gutter), var(--safe-left, 0px)) max(var(--dgrid-page-gutter), var(--safe-right, 0px)) !important;
}
html body[data-template][data-dgrid-layout] main.content-field,
html body[data-template][data-dgrid-layout] main.content-field[data-kap-grid-scroll] {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  column-gap: var(--dgrid-page-gap);
}
html body[data-template][data-dgrid-layout] main.content-field > *,
html body[data-template][data-dgrid-layout] [data-dgrid-area] {
  min-width: 0;
}
/* Reading measure belongs to prose, never to the entire workspace. */
body[data-template] .lede,
body[data-template] .article-body {
  max-inline-size: var(--k-reading-width, 72ch);
}
body[data-template] [data-dgrid-area] :is(code, .coordinate-code) {
  overflow-wrap: anywhere;
}
body[data-template] main.content-field img,
body[data-template] main.content-field svg {
  max-width: 100%;
}

@media (min-width: 768px) and (max-width: 1199px) {
  :root { --dgrid-columns: 12; }
}
@media (max-width: 767px) {
  :root {
    --dgrid-columns: 4;
    --dgrid-page-gutter: var(--k-space-K3, 12px);
    --dgrid-page-gap: var(--k-space-K3, 12px);
  }
}
/* Compact/medium content is normal document flow. Desktop owners keep their
 * bounded workspaces; Chat retains its explicit message stream/composer. */
@media (max-width: 1199px) {
  /* A perspective-scaled decorative plane must not expand document flow. */
  html body[data-page="home"][data-dgrid-layout] main.content-field::before {
    transform: none !important;
  }
  /* Home's nested workspace carries desktop column addresses as well. Flex
   * recomposition ignores those addresses visually while preserving them in
   * the DOM; no implicit desktop tracks can squeeze cards on a tablet. */
  html body[data-template][data-dgrid-layout] :is(.home-workspace, .home-lower-grid) {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--dgrid-page-gap) !important;
  }
  html body[data-template][data-dgrid-layout] :is(.home-workspace, .home-lower-grid) > * {
    flex: 0 0 auto;
    width: 100% !important;
    min-width: 0;
  }
  /* Closed drawers leave neither an offscreen scroll footprint nor focusable
   * invisible controls. They reappear through the existing Chat state owner. */
  body[data-page="chat"]:not(.chat-sessions-open) .chat-sessions,
  body[data-page="chat"]:not(.chat-context-open) .chat-context {
    display: none !important;
  }
  body[data-page="chat"] .chat-body {
    grid-template-columns: minmax(0, 1fr);
  }
  body[data-page="chat"] .chat-workspace { grid-column: 1 / -1; }
  html:has(body[data-template][data-dgrid-layout]:not([data-page="chat"])) {
    height: auto !important;
    overflow-y: auto !important;
  }
  html body[data-template][data-dgrid-layout]:not([data-page="chat"]) {
    display: block !important;
    height: auto !important;
    min-height: var(--aenet-vh, 100svh) !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html body[data-template][data-dgrid-layout]:not([data-page="chat"]) > .wrap:not(.topbar) {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  html body[data-template][data-dgrid-layout]:not([data-page="chat"]) main.content-field {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    gap: var(--dgrid-page-gap) !important;
  }
  html body[data-template][data-dgrid-layout]:not([data-page="chat"]) main.content-field > [data-dgrid-area] {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none;
  }
}