/* =====================================================================
   AENET Cloud Public — DEVICE ADAPTIVE PROJECTION LAYER (v1.0)
   POM::AENET_DEVICE_ADAPTIVE_PROJECTION_FABRIC_V1

   The canonical semantic responsive layer. Loaded LAST on every generated
   page (after mobile.css). It projects the ONE structure through semantic
   classes COMPACT / MEDIUM / EXPANDED / WIDE.

   Breakpoint VALUES in this file come ONLY from
   _control/display/responsive-contract.json (numeric source:
   design/kgrid/breakpoints.json): 767 / 768 / 1199 / 1200 / 1919 / 1920.
   The responsive doctor rejects any other numeric media value.

   Priority: projection attributes (html[data-projection]) win; media-query
   fallbacks below them exist so the page still adapts without JS.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 1. SAFE AREA + VIEWPORT HEIGHT TOKENS (contract §42–§44)            */
/* ------------------------------------------------------------------ */
:root {
  /* Safe-area semantic tokens — web adapter resolves env() once here. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  /* Floating layers offset (contract §43): SAFE.* + FLOATING.OFFSET. */
  --floating-offset: 16px;
  /* Dynamic viewport strategy (contract §44): no raw 100vh for chrome. */
  --aenet-vh-fallback: 100vh;
  --aenet-vh: 100svh;
  --aenet-dvh: 100dvh;
  --aenet-viewport-h: 100svh;
  --aenet-keyboard-offset: 0px;
  /* Minimum interactive target (contract §50). */
  --size-interaction-min: 44px;
  --size-interaction-min-coarse: 48px;
}

@supports (height: 100svh) {
  :root { --aenet-vh: 100svh; }
}

/* ------------------------------------------------------------------ */
/* 2. APP PROJECTION ATTRIBUTES (set by projection-resolver.js)        */
/* ------------------------------------------------------------------ */
html[data-projection] { --aenet-projection: attr(data-projection); }

/* --- COMPACT (single pane, ≤767px) --- */
html[data-projection="COMPACT"] {
  /* No fixed viewport chrome; content scrolls the document. */
  --aenet-header-height: 56px;
  --aenet-status-height: 0px;
}
html[data-projection="COMPACT"] body[data-page] main {
  min-width: 0;
}
/* C00 sidebar / D30 inspector become overlays on compact. The region keeps
   its RegionId (C00/D30) — only the presentation changes (§19/§20). */
html[data-projection="COMPACT"] [data-region="C00"],
html[data-projection="COMPACT"] aside[data-kgrid-slot="SIDEBAR"],
html[data-projection="COMPACT"] .chat-sessions {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  top: auto;
  width: auto;
  height: min(70vh, calc(var(--aenet-viewport-h) - var(--safe-top) - 72px));
  max-height: calc(var(--aenet-viewport-h) - var(--safe-top) - 72px);
  border-radius: 16px 16px 0 0;
  transform: translateY(105%);
  transition: transform 0.22s var(--ease-standard, ease);
  z-index: var(--z-chat-drawer, 1000);
}
html[data-projection="COMPACT"] [data-region="C00"].is-open,
html[data-projection="COMPACT"] body.chat-sessions-open .chat-sessions,
html[data-projection="COMPACT"] [data-region="C00"][data-state="OPEN"] {
  transform: translateY(0);
}
html[data-projection="COMPACT"] [data-region="D30"],
html[data-projection="COMPACT"] .chat-context {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  top: auto;
  width: auto;
  height: min(60vh, calc(var(--aenet-viewport-h) - var(--safe-top) - 72px));
  max-height: calc(var(--aenet-viewport-h) - var(--safe-top) - 72px);
  border-radius: 16px 16px 0 0;
  transform: translateY(105%);
  transition: transform 0.22s var(--ease-standard, ease);
  z-index: var(--z-chat-drawer, 1000);
}
html[data-projection="COMPACT"] [data-region="D30"].is-open,
html[data-projection="COMPACT"] body.chat-context-open .chat-context,
html[data-projection="COMPACT"] [data-region="D30"][data-state="OPEN"] {
  transform: translateY(0);
}
/* K# → bottom sheet trigger position (safe-area aware, above composer if any). */
html[data-projection="COMPACT"] .knav-launcher {
  right: calc(var(--floating-offset) + var(--safe-right));
  bottom: calc(var(--floating-offset) + var(--safe-bottom));
}

/* Home compact overflow guards (POM §36/§110 — no page-level horizontal
   scroll). Hero actions wrap; coordinate nav wraps or scrolls internally. */
html[data-projection="COMPACT"] .home-hero-actions {
  flex-wrap: wrap;
}
html[data-projection="COMPACT"] .home-hero-actions .btn {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
html[data-projection="COMPACT"] .home-hero-actions .btn code {
  white-space: normal;
  overflow-wrap: anywhere;
}
html[data-projection="COMPACT"] body[data-page="home"] nav.home-coordinate-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  grid-auto-flow: row;
}
html[data-projection="COMPACT"] body[data-page="home"] nav.home-coordinate-nav a {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Long engineering ids inside panels wrap — never push the page. */
html[data-projection="COMPACT"] .mega-panel code,
html[data-projection="COMPACT"] .mega-panel-meta code,
html[data-projection="COMPACT"] [data-kgrid-slot] code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* --- MEDIUM (drawer, 768–1199px) --- */
html[data-projection="MEDIUM"] {
  --aenet-header-height: 60px;
}
/* C00 collapsible drawer (left), D30 side/bottom inspector. */
html[data-projection="MEDIUM"] [data-region="C00"],
html[data-projection="MEDIUM"] aside[data-kgrid-slot="SIDEBAR"],
html[data-projection="MEDIUM"] .chat-sessions {
  position: fixed;
  top: var(--aenet-header-height);
  bottom: 0;
  left: 0;
  width: min(320px, calc(100vw - 48px));
  transform: translateX(-100%);
  transition: transform 0.22s var(--ease-standard, ease);
  z-index: var(--z-chat-drawer, 1000);
}
html[data-projection="MEDIUM"] [data-region="C00"].is-open,
html[data-projection="MEDIUM"] body.chat-sessions-open .chat-sessions {
  transform: translateX(0);
}

/* --- EXPANDED (multi-pane, 1200–1919px) — workstation shell intact --- */
/* --- WIDE (≥1920px): controlled content frame — no 100vw text lines §26 */
html[data-projection="WIDE"] main,
html[data-projection="WIDE"] .content-field,
html[data-projection="WIDE"] .wrap {
  max-width: var(--k-shell-max, 1800px);
  margin-left: auto;
  margin-right: auto;
}
html[data-projection="WIDE"] .topbar-inner,
html[data-projection="WIDE"] header.site .wrap {
  max-width: var(--k-shell-max, 1800px);
}

/* ------------------------------------------------------------------ */
/* 3. CONTRACT-BAND MEDIA FALLBACKS (no-JS parity)                     */
/*    Values are the ONLY numeric media queries this layer emits:      */
/*    767 / 768 / 1199 / 1200 / 1919 / 1920                            */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
  :root {
    --aenet-projection: COMPACT;
    --size-interaction-min: var(--size-interaction-min-coarse);
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  :root { --aenet-projection: MEDIUM; }
}
@media (min-width: 1200px) and (max-width: 1919px) {
  :root { --aenet-projection: EXPANDED; }
}
@media (min-width: 1920px) {
  :root { --aenet-projection: WIDE; }
}

/* ------------------------------------------------------------------ */
/* 3A. HOME COORDINATE PROJECTION                                     */
/* ------------------------------------------------------------------ */
/*
 * Home's EXPANDED/WIDE view is an intentionally bounded 24-column
 * workstation.  Below 1200px the same C10-C22 structure becomes a
 * document-flow projection: one page scroll owner, one deterministic
 * coordinate sequence, and no inherited desktop row/column locks.
 *
 * These declarations live in the last-loaded projection adapter and use
 * the contract breakpoint.  The !important flags intentionally release
 * workstation declarations in v09.css which are also marked !important.
 */
@media (max-width: 1199px) {
  html:has(body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"]) {
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] {
    display: block !important;
    width: 100%;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] > header.site,
  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] > footer.site {
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] > .wrap {
    display: block !important;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0 12px 16px;
    overflow: visible !important;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] .context-bar,
  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] .route-context {
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] main.content-field {
    display: grid !important;
    width: 100%;
    min-width: 0 !important;
    min-height: 0;
    height: auto !important;
    margin: 0;
    padding: 8px 0 0;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    grid-auto-flow: row;
    grid-auto-rows: auto !important;
    gap: 10px;
    overflow: visible !important;
    align-content: start;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] main.content-field > [data-dgrid-area] {
    grid-column: 1 / 2 !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0;
    height: auto !important;
    min-height: 0;
    align-self: auto !important;
    margin: 0;
    overflow: visible;
  }

  /* C22/K10/B03 have stronger desktop placement selectors (including an
     id selector on C22). Reset each top-level owner explicitly so none can
     recreate 24 implicit columns inside the one-column flow projection. */
  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] .home-identity,
  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] .home-visual-system,
  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] #home-chat-entry,
  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] nav.home-coordinate-nav,
  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] .home-workspace {
    grid-column: 1 / 2 !important;
    grid-row: auto !important;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] .home-identity,
  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] .home-visual-system {
    padding: 30px 16px 16px;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] .home-identity {
    display: flex;
    justify-content: flex-start;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] .home-identity h1 {
    margin: 4px 0 8px;
    font-size: clamp(25px, 7vw, 38px);
    line-height: 1.08;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] .home-identity .lede {
    display: block;
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    overflow: visible;
    -webkit-line-clamp: unset;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] .home-hero-links {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] .home-visual-system {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 10px;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] .home-visual-head {
    grid-template-columns: minmax(0, 1fr) minmax(220px, .7fr);
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] .home-visual-canvas {
    min-height: 180px;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] #home-chat-entry,
  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] #home-chat-entry > [data-home-chat-entry],
  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] #home-chat-entry .home-chat-entry {
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] #home-chat-entry .home-chat-entry {
    display: flex;
    flex-direction: column;
    padding: 14px;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] #home-chat-entry .home-chat-entry-head,
  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] #home-chat-entry .home-chat-entry-body,
  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] #home-chat-entry .home-chat-quick,
  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] #home-chat-entry .home-chat-actions,
  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] #home-chat-entry .home-chat-note {
    grid-column: auto;
    grid-row: auto;
    min-width: 0;
    white-space: normal;
    overflow: visible;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] #home-chat-entry .home-chat-entry-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] nav.home-coordinate-nav {
    display: flex !important;
    width: 100%;
    height: auto !important;
    min-width: 0;
    padding: 7px;
    gap: 6px;
    align-items: center;
    flex-flow: row nowrap;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] nav.home-coordinate-nav .home-coordinate-nav-label,
  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] nav.home-coordinate-nav a {
    flex: 0 0 auto;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] nav.home-coordinate-nav a {
    width: auto;
    min-width: 92px;
    height: 34px;
    padding: 0 8px;
    white-space: nowrap;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] .home-workspace {
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible !important;
    scrollbar-gutter: auto;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] .home-lower-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-flow: row;
    grid-auto-rows: auto !important;
    gap: 10px !important;
    min-height: 0;
    overflow: visible !important;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] .home-lower-grid > [data-dgrid-area] {
    grid-column: auto !important;
    grid-row: auto !important;
    min-width: 0;
    min-height: 0;
    height: auto !important;
    margin: 0;
    padding: 30px 12px 12px;
    overflow: visible;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] > footer.site {
    display: block;
    padding: 12px;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] > footer.site .grid {
    flex-wrap: wrap;
    white-space: normal;
    overflow: visible;
  }
}

@media (max-width: 767px) {
  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] > .wrap {
    padding-inline: 8px;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] .home-visual-head {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] .home-visual-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] .home-visual-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] .home-hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] .home-hero-actions .btn {
    width: 100%;
    justify-content: flex-start;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] .home-hero-links {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] .home-hero-links > span[aria-hidden="true"] {
    display: none;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] .home-lower-grid,
  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] .home-lower-grid .domain-grid,
  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] .home-lower-grid .cards,
  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] .home-flow .flow-strip {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] .home-lower-grid > [data-dgrid-area] {
    grid-column: 1 / -1 !important;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] #home-chat-entry .home-chat-input-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  body[data-page="home"][data-dgrid-layout="D.LAYOUT.DASHBOARD"] #home-chat-entry .home-chat-send {
    width: 100%;
  }
}

/* ------------------------------------------------------------------ */
/* 4. CHAT COMPOSER + SHEETS — keyboard / safe-area / orientation §35  */
/* ------------------------------------------------------------------ */
/* Composer must never be hidden by the virtual keyboard (§35/§108).   */
html[data-projection="COMPACT"] .chat-composer {
  position: sticky;
  bottom: calc(var(--safe-bottom) + var(--aenet-keyboard-offset));
}
html[data-projection="COMPACT"] .chat-stream {
  max-height: calc(var(--aenet-viewport-h) - 120px - var(--safe-bottom));
}
/* Bottom sheets rise above the keyboard when it opens. */
html[data-projection="COMPACT"] [data-region="D30"],
html[data-projection="COMPACT"] .chat-context,
html[data-projection="COMPACT"] [data-region="C00"],
html[data-projection="COMPACT"] .chat-sessions {
  bottom: var(--aenet-keyboard-offset);
}
/* Message stream is the primary scroll owner on every projection (§64). */
.chat-stream { overflow-y: auto; overscroll-behavior: contain; }

/* ------------------------------------------------------------------ */
/* 5. INPUT CAPABILITY (§48–§51)                                       */
/* ------------------------------------------------------------------ */
html[data-pointer="POINTER_COARSE"] {
  --size-interaction-min: var(--size-interaction-min-coarse);
}
html[data-pointer="POINTER_COARSE"] a,
html[data-pointer="POINTER_COARSE"] button,
html[data-pointer="POINTER_COARSE"] [role="button"],
html[data-pointer="POINTER_COARSE"] .nav-toggle,
html[data-pointer="POINTER_COARSE"] .chat-session-item,
html[data-pointer="POINTER_COARSE"] .knav-launcher {
  min-height: var(--size-interaction-min);
}
/* Hover-only affordances are hidden when hover is unavailable (§49). */
html[data-hover="NO_HOVER"] .hover-only { display: none !important; }

/* ------------------------------------------------------------------ */
/* 6. DENSITY (§74–§76) — token/layout expression, never structure     */
/* ------------------------------------------------------------------ */
html[data-density="DENSITY.COMFORTABLE"] {
  --dgrid-space-03: 16px;
  --dgrid-space-04: 20px;
  --fgrid-line-body: 1.6;
}
html[data-density="DENSITY.COMPACT"] {
  --dgrid-space-03: 10px;
  --dgrid-space-04: 14px;
  --fgrid-line-body: 1.45;
}

/* ------------------------------------------------------------------ */
/* 7. COMPONENT PROJECTION — container queries (§12/§15/§117)          */
/*    Allowed by design/kgrid/breakpoints.json containerQueries.       */
/* ------------------------------------------------------------------ */
@container (max-width: 767px) {
  .system-card .card-description,
  .system-card [data-field="description"],
  .system-card [data-field="coordinate"],
  .system-card [data-field="hash"] { display: none; }
  .info-panel .panel-secondary { display: none; }
  .inspector .inspector-secondary { display: none; }
}
@container (min-width: 768px) and (max-width: 1199px) {
  .system-card [data-field="coordinate"],
  .system-card [data-field="hash"] { display: none; }
}

/* ------------------------------------------------------------------ */
/* 8. LOD — level of detail (§60/§61)                                  */
/* ------------------------------------------------------------------ */
[data-lod="LOD.0"] [data-lod-hide="LOD.1"],
[data-lod="LOD.0"] [data-lod-hide="LOD.2"],
[data-lod="LOD.0"] [data-lod-hide="LOD.3"],
[data-lod="LOD.1"] [data-lod-hide="LOD.2"],
[data-lod="LOD.1"] [data-lod-hide="LOD.3"],
[data-lod="LOD.2"] [data-lod-hide="LOD.3"] { display: none; }

/* ------------------------------------------------------------------ */
/* 9. REDUCED MOTION (§78) — state flow unchanged, motion reduced      */
/* ------------------------------------------------------------------ */
html[data-motion="REDUCED"] *,
html[data-motion="REDUCED"] *::before,
html[data-motion="REDUCED"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* ------------------------------------------------------------------ */
/* 10. PROJECTION DEBUG OVERLAY (engineering only, §93)                */
/*     Enabled ONLY with html[data-projection-debug] — never in prod.  */
/* ------------------------------------------------------------------ */
html[data-projection-debug] body::after {
  content: "PROJECTION " attr(data-app-projection) " · VIEWPORT " counter(w) "px";
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 2147483000;
  padding: 6px 10px;
  border: 1px solid rgba(214, 107, 255, 0.6);
  border-radius: 6px;
  background: rgba(8, 12, 18, 0.92);
  color: #d66bff;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  pointer-events: none;
}
html[data-projection-debug] { counter-reset: w; }
html[data-projection-debug] body { counter-increment: w 0; }
@media (min-width: 768px) { html[data-projection-debug] body { counter-increment: w; } }
@media (min-width: 1200px) { html[data-projection-debug] body { counter-increment: w; } }
@media (min-width: 1920px) { html[data-projection-debug] body { counter-increment: w; } }

/* ------------------------------------------------------------------ */
/* 11. OVERFLOW GUARDS (§110)                                          */
/*     Technical ids may wrap/copy; never cause page-level overflow.   */
/* ------------------------------------------------------------------ */
[data-tech-id], .sys-id, .route-id, code.tech-id {
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Code blocks own their horizontal scroll (§111) — never the document. */
pre, .code-block { overflow-x: auto; max-width: 100%; }