/* Architecture T03 full-bleed DGRID adapter.
 * C01/C02/C03-C07/B04-B05 already own 24-column coordinates; this layer
 * releases the shared shell gutter so those coordinates reach both edges. */

@media (min-width: 1200px) {
  html:has(body[data-page="architecture"]) {
    height: 100vh;
    overflow: hidden;
  }

  body[data-page="architecture"] > .wrap {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }

  body[data-page="architecture"] main.content-field {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    grid-template-columns: repeat(24, minmax(0, 1fr)) !important;
  }

  /* C01–C07 coordinate matrix v2. The page owns one ordered matrix:
   * C01 identity → C02 visual map → C03/C04/C05 primary lanes →
   * C06/C07 guard + map lanes. Every cell is explicit and non-overlapping. */
  body[data-page="architecture"] main.content-field {
    grid-template-rows: 72px 218px minmax(220px, 1fr) 54px !important;
    gap: 8px !important;
  }

  body[data-page="architecture"] main.content-field > [data-kslot="TITLE"] {
    grid-column: 1 / 25 !important;
    grid-row: 1 !important;
  }

  body[data-page="architecture"] main.content-field > [data-kslot="MAIN_VISUAL"] {
    grid-column: 1 / 25 !important;
    grid-row: 2 !important;
  }

  body[data-page="architecture"] main.content-field > [data-kslot="CONTENT"] {
    grid-column: 1 / 25 !important;
    grid-row: 3 !important;
  }

  body[data-page="architecture"] main.content-field > [data-kslot="RELATED"] {
    grid-column: 1 / 25 !important;
    grid-row: 4 !important;
  }

  body[data-page="architecture"] .architecture-content-workspace {
    display: block !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  body[data-page="architecture"] .architecture-section-stream {
    display: grid !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: repeat(24, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "c03 c03 c03 c03 c03 c03 c03 c03 c04 c04 c04 c04 c04 c04 c04 c04 c05 c05 c05 c05 c05 c05 c05 c05"
      "c06 c06 c06 c06 c06 c06 c06 c06 c06 c06 c06 c06 c07 c07 c07 c07 c07 c07 c07 c07 c07 c07 c07 c07" !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  body[data-page="architecture"] .architecture-section-stream > [data-c-section="C03"] { grid-area: c03 !important; }
  body[data-page="architecture"] .architecture-section-stream > [data-c-section="C04"] { grid-area: c04 !important; }
  body[data-page="architecture"] .architecture-section-stream > [data-c-section="C05"] { grid-area: c05 !important; }
  body[data-page="architecture"] .architecture-section-stream > [data-c-section="C06"] { grid-area: c06 !important; }
  body[data-page="architecture"] .architecture-section-stream > [data-c-section="C07"] { grid-area: c07 !important; }

  body[data-page="architecture"] .architecture-section[data-c-section] {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 9px !important;
    overflow: hidden !important;
    border-radius: 4px;
  }

  body[data-page="architecture"] .architecture-section[data-c-section]::after,
  body[data-page="architecture"] .arch-section[data-c-section]::after {
    content: attr(data-c-section) " · " attr(data-dgrid-cell);
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 1;
    color: var(--text-faint);
    font: 8px/1 var(--mono);
    letter-spacing: .06em;
    white-space: nowrap;
    pointer-events: none;
  }

  body[data-page="architecture"] .architecture-section-head {
    position: relative;
    z-index: 2;
    min-width: 0;
    margin: 0 0 8px !important;
    padding: 0 150px 6px 0 !important;
    border-bottom: 1px solid rgba(77, 163, 255, .22);
  }

  body[data-page="architecture"] .architecture-section-head h2 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px !important;
  }

  body[data-page="architecture"] .architecture-block-grid,
  body[data-page="architecture"] .architecture-security-grid,
  body[data-page="architecture"] .architecture-map-directory {
    flex: 1 1 auto;
    min-height: 0 !important;
    align-content: start;
    overflow: auto !important;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
  }

  body[data-page="architecture"] .architecture-block-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body[data-page="architecture"] .architecture-security-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body[data-page="architecture"] .architecture-map-directory ul {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body[data-page="architecture"] .architecture-block,
  body[data-page="architecture"] .security-card,
  body[data-page="architecture"] .architecture-map-directory a {
    min-width: 0;
    overflow: hidden;
  }

  body[data-page="architecture"] .architecture-section[data-c-section="C03"],
  body[data-page="architecture"] .architecture-section[data-c-section="C06"] {
    border-top: 2px solid var(--rgbm-guard);
  }

  body[data-page="architecture"] .architecture-section[data-c-section="C04"] {
    border-top: 2px solid var(--rgbm-action);
  }

  body[data-page="architecture"] .architecture-section[data-c-section="C05"] {
    border-top: 2px solid var(--rgbm-action);
  }

  body[data-page="architecture"] .architecture-section[data-c-section="C07"] {
    border-top: 2px solid var(--rgbm-insight);
  }
}

@media (max-width: 1199px) {
  body[data-page="architecture"] main.content-field {
    width: 100% !important;
    max-width: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  body[data-page="architecture"] .architecture-section-stream {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "c03 c04"
      "c05 c06"
      "c07 c07" !important;
    gap: 10px !important;
  }

  body[data-page="architecture"] .architecture-section-stream > [data-c-section="C03"] { grid-area: c03 !important; }
  body[data-page="architecture"] .architecture-section-stream > [data-c-section="C04"] { grid-area: c04 !important; }
  body[data-page="architecture"] .architecture-section-stream > [data-c-section="C05"] { grid-area: c05 !important; }
  body[data-page="architecture"] .architecture-section-stream > [data-c-section="C06"] { grid-area: c06 !important; }
  body[data-page="architecture"] .architecture-section-stream > [data-c-section="C07"] { grid-area: c07 !important; }
}

@media (max-width: 767px) {
  body[data-page="architecture"] .architecture-section-stream {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    grid-template-areas:
      "c03"
      "c04"
      "c05"
      "c06"
      "c07" !important;
    gap: 10px !important;
  }

  body[data-page="architecture"] .architecture-section-stream > [data-c-section="C03"],
  body[data-page="architecture"] .architecture-section-stream > [data-c-section="C04"],
  body[data-page="architecture"] .architecture-section-stream > [data-c-section="C05"],
  body[data-page="architecture"] .architecture-section-stream > [data-c-section="C06"],
  body[data-page="architecture"] .architecture-section-stream > [data-c-section="C07"] {
    grid-column: 1 !important;
  }

  body[data-page="architecture"] .architecture-section[data-c-section] {
    min-height: 240px !important;
    overflow: visible !important;
  }
}

/* SYSTEM STRUCTURE VISUAL — continuous public observation loop.
 * The canvas is a decorative, read-only projection of the architecture graph.
 * It never changes layout or data; only transform/opacity are animated. The
 * loop is intentionally CSS-owned so it has no timer, fetch, or second state
 * owner, and the reduced-motion contract can pause it deterministically. */
body[data-page="architecture"] .architecture-visual-canvas[data-motion-loop="SYSTEM_STRUCTURE_VISUAL"] {
  isolation: isolate;
}

body[data-page="architecture"] .architecture-visual-canvas[data-motion-loop="SYSTEM_STRUCTURE_VISUAL"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .22;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 46px,
    color-mix(in srgb, var(--rgbm-navigation) 28%, transparent) 47px 48px,
    transparent 49px 94px
  );
  transform: translateX(-94px);
  animation: architecture-structure-sweep 12s linear infinite;
}

body[data-page="architecture"] .architecture-visual-canvas[data-motion-loop="SYSTEM_STRUCTURE_VISUAL"] > * {
  z-index: 1;
}

body[data-page="architecture"] .architecture-visual-canvas[data-motion-loop="SYSTEM_STRUCTURE_VISUAL"] .arch-map-node {
  animation: architecture-node-breathe 4.8s ease-in-out infinite;
}

body[data-page="architecture"] .architecture-visual-canvas[data-motion-loop="SYSTEM_STRUCTURE_VISUAL"] .arch-map-node:nth-of-type(2) {
  animation-delay: .55s;
}

body[data-page="architecture"] .architecture-visual-canvas[data-motion-loop="SYSTEM_STRUCTURE_VISUAL"] .arch-map-node:nth-of-type(3) {
  animation-delay: 1.1s;
}

body[data-page="architecture"] .architecture-visual-canvas[data-motion-loop="SYSTEM_STRUCTURE_VISUAL"] .arch-map-node:nth-of-type(4) {
  animation-delay: 1.65s;
}

body[data-page="architecture"] .architecture-visual-canvas[data-motion-loop="SYSTEM_STRUCTURE_VISUAL"] .arch-map-node:nth-of-type(5) {
  animation-delay: 2.2s;
}

body[data-page="architecture"] .architecture-visual-canvas[data-motion-loop="SYSTEM_STRUCTURE_VISUAL"] .arch-map-rail:not(.arch-map-rail-blocked) {
  transform-origin: left center;
  animation: architecture-rail-pulse 3.2s ease-in-out infinite;
}

body[data-page="architecture"] .architecture-visual-canvas[data-motion-loop="SYSTEM_STRUCTURE_VISUAL"] .arch-map-rail-b {
  animation-delay: .32s;
}

body[data-page="architecture"] .architecture-visual-canvas[data-motion-loop="SYSTEM_STRUCTURE_VISUAL"] .arch-map-rail-c {
  animation-delay: .64s;
}

body[data-page="architecture"] .architecture-visual-canvas[data-motion-loop="SYSTEM_STRUCTURE_VISUAL"] .arch-map-rail-blocked {
  animation: architecture-blocked-pulse 3.2s ease-in-out infinite;
}

body[data-page="architecture"] .architecture-visual-canvas[data-motion-loop="SYSTEM_STRUCTURE_VISUAL"] .arch-map-packet {
  animation-name: architecture-flow-packet !important;
  animation-duration: 4.8s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}

body[data-page="architecture"] .architecture-visual-canvas[data-motion-loop="SYSTEM_STRUCTURE_VISUAL"] .arch-map-contract {
  animation: architecture-contract-pulse 5.4s ease-in-out infinite;
}

body[data-page="architecture"] .architecture-visual-canvas[data-motion-loop="SYSTEM_STRUCTURE_VISUAL"] .arch-map-contract-b {
  animation-delay: .8s;
}

body[data-page="architecture"] .architecture-visual-canvas[data-motion-loop="SYSTEM_STRUCTURE_VISUAL"] .arch-map-contract-c {
  animation-delay: 1.6s;
}

@keyframes architecture-structure-sweep {
  0% { transform: translateX(-94px); opacity: .12; }
  12% { opacity: .28; }
  88% { opacity: .28; }
  100% { transform: translateX(94px); opacity: .12; }
}

@keyframes architecture-node-breathe {
  0%, 100% { transform: scale(1); opacity: .86; }
  50% { transform: scale(1.018); opacity: 1; }
}

@keyframes architecture-rail-pulse {
  0%, 100% { transform: scaleX(.82); opacity: .54; }
  50% { transform: scaleX(1); opacity: 1; }
}

@keyframes architecture-blocked-pulse {
  0%, 100% { opacity: .34; }
  50% { opacity: .82; }
}

@keyframes architecture-contract-pulse {
  0%, 100% { transform: translateY(2px); opacity: .42; }
  50% { transform: translateY(0); opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="architecture"] .architecture-visual-canvas[data-motion-loop="SYSTEM_STRUCTURE_VISUAL"]::before,
  body[data-page="architecture"] .architecture-visual-canvas[data-motion-loop="SYSTEM_STRUCTURE_VISUAL"] .arch-map-node,
  body[data-page="architecture"] .architecture-visual-canvas[data-motion-loop="SYSTEM_STRUCTURE_VISUAL"] .arch-map-rail,
  body[data-page="architecture"] .architecture-visual-canvas[data-motion-loop="SYSTEM_STRUCTURE_VISUAL"] .arch-map-packet,
  body[data-page="architecture"] .architecture-visual-canvas[data-motion-loop="SYSTEM_STRUCTURE_VISUAL"] .arch-map-contract {
    animation: none !important;
    transform: none !important;
    opacity: 1;
  }
}

/* Architecture uses the shared AENORA background standard across the full
 * document. C01–C07 panels and their coordinate matrix remain foreground
 * owners; this field only supplies the common XGRID/RGBM visual substrate. */
body[data-page="architecture"] {
  min-height: 100%;
  background-color: color-mix(in srgb, var(--bg) 93%, var(--rgbm-neutral) 7%);
  background-image:
    linear-gradient(color-mix(in srgb, var(--rgbm-navigation) 10%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--rgbm-navigation) 10%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--rgbm-system) 12%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--rgbm-system) 12%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--rgbm-insight) 13%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--rgbm-insight) 13%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--rgbm-system) 18%, transparent) 1px, transparent 1px);
  background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px, 250px 250px, 250px 250px, 4.1666667% 100%;
  background-attachment: fixed;
}
body[data-page="architecture"]::before,
body[data-page="architecture"]::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
body[data-page="architecture"]::before {
  opacity: .44;
  background-image:
    repeating-linear-gradient(115deg, transparent 0 86px, color-mix(in srgb, var(--rgbm-navigation) 26%, transparent) 87px 88px, transparent 89px 178px),
    repeating-linear-gradient(115deg, transparent 0 143px, color-mix(in srgb, var(--rgbm-system) 20%, transparent) 144px 145px, transparent 146px 286px),
    repeating-linear-gradient(115deg, transparent 0 233px, color-mix(in srgb, var(--rgbm-insight) 18%, transparent) 234px 235px, transparent 236px 468px),
    repeating-linear-gradient(115deg, transparent 0 377px, color-mix(in srgb, var(--rgbm-action) 13%, transparent) 378px 379px, transparent 380px 756px),
    repeating-linear-gradient(115deg, transparent 0 611px, color-mix(in srgb, var(--rgbm-guard) 10%, transparent) 612px 613px, transparent 614px 1226px);
  background-size: 360px 360px, 520px 520px, 760px 760px, 1080px 1080px, 1440px 1440px;
  animation: architecture-rgbm-lines-drift 28s linear infinite;
  mix-blend-mode: screen;
}
body[data-page="architecture"]::after {
  background:
    radial-gradient(circle at 50% 8%, color-mix(in srgb, var(--rgbm-insight) 12%, transparent), transparent 46%),
    linear-gradient(180deg, color-mix(in srgb, var(--rgbm-system) 5%, transparent), transparent 26%, color-mix(in srgb, var(--rgbm-neutral) 18%, transparent));
}
body[data-page="architecture"] > header.site,
body[data-page="architecture"] > .wrap,
body[data-page="architecture"] > footer.site {
  position: relative;
  z-index: 1;
}
body[data-page="architecture"] main.content-field { background: transparent; }
@keyframes architecture-rgbm-lines-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 360px 240px, -520px 340px, 760px -460px, -1080px 620px, 1440px -760px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="architecture"]::before { animation: none; }
}

/* Architecture display normalization v3.
 * The coordinate graph remains authoritative, but the desktop surface is a
 * readable document flow: no fixed four-row canvas, no clipped footer, and no
 * six-panel squeeze. Each C section owns its content height; the browser (or
 * an explicit future KAP-GRID surface) owns vertical progression. */
@media (min-width: 1200px) {
  html:has(body[data-page="architecture"]) {
    height: auto !important;
    min-height: 100%;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  body[data-page="architecture"] {
    min-width: 0 !important;
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
    display: block !important;
  }

  body[data-page="architecture"] > .wrap {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 0 clamp(16px, 2.4vw, 40px) !important;
    display: block !important;
    overflow: visible !important;
  }

  body[data-page="architecture"] .context-bar {
    /* Keep the graph index in document flow. A sticky rail under the global
     * topbar follows the whole page and can cover C01–C07 while scrolling. */
    position: static !important;
    top: auto !important;
    height: auto !important;
    min-height: 48px !important;
    display: grid !important;
    grid-template-columns: minmax(220px, .75fr) minmax(0, 2.25fr) !important;
    align-items: stretch !important;
    gap: 10px !important;
    overflow: visible !important;
    z-index: auto !important;
  }

  body[data-page="architecture"] .route-context,
  body[data-page="architecture"] .context-local-nav {
    height: auto !important;
    min-height: 48px !important;
    overflow: visible !important;
  }

  body[data-page="architecture"] .context-local-nav {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 4px !important;
    align-items: stretch !important;
  }

  body[data-page="architecture"] .context-local-nav .local-nav-link {
    min-width: 0 !important;
    height: auto !important;
    min-height: 34px !important;
    padding: 6px 7px !important;
    overflow: hidden !important;
    font-size: var(--f-size-03, 12px) !important;
    line-height: var(--f-line-tight, 1.18) !important;
  }

  body[data-page="architecture"] main.content-field {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 18px 0 44px !important;
    display: block !important;
    overflow: visible !important;
    background: transparent !important;
  }

  body[data-page="architecture"] main.content-field > [data-kslot="TITLE"],
  body[data-page="architecture"] main.content-field > [data-kslot="MAIN_VISUAL"],
  body[data-page="architecture"] main.content-field > [data-kslot="CONTENT"],
  body[data-page="architecture"] main.content-field > [data-kslot="RELATED"] {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 16px !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  body[data-page="architecture"] main.content-field > [data-kslot="TITLE"] {
    display: grid !important;
    grid-template-columns: minmax(220px, .8fr) minmax(0, 1.6fr) minmax(260px, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 12px 20px !important;
    align-items: center !important;
    padding: 18px 22px !important;
    overflow: visible !important;
  }

  body[data-page="architecture"] main.content-field > [data-kslot="TITLE"] > .eyebrow,
  body[data-page="architecture"] main.content-field > [data-kslot="TITLE"] > h1,
  body[data-page="architecture"] main.content-field > [data-kslot="TITLE"] > .lede,
  body[data-page="architecture"] main.content-field > [data-kslot="TITLE"] > .arch-meta {
    grid-column: auto !important;
    grid-row: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-page="architecture"] main.content-field > [data-kslot="TITLE"] > h1 {
    margin: 0 !important;
    font-size: clamp(24px, 2.2vw, 36px) !important;
  }

  body[data-page="architecture"] main.content-field > [data-kslot="TITLE"] > .lede {
    margin: 0 !important;
    font-size: var(--f-size-05, 14px) !important;
    line-height: var(--f-line-relaxed, 1.65) !important;
  }

  body[data-page="architecture"] .arch-meta {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  body[data-page="architecture"] .architecture-visual-map {
    height: auto !important;
    min-height: 0 !important;
    padding: 18px 20px !important;
    display: block !important;
    overflow: visible !important;
  }

  body[data-page="architecture"] .architecture-visual-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 18px !important;
    align-items: start !important;
    margin-bottom: 14px !important;
  }

  body[data-page="architecture"] .architecture-visual-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(72px, 1fr)) !important;
    gap: 6px !important;
  }

  body[data-page="architecture"] .architecture-map-structure {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    height: auto !important;
    margin: 0 0 14px !important;
  }

  body[data-page="architecture"] .architecture-map-structure li {
    min-height: 74px !important;
    padding: 10px !important;
  }

  body[data-page="architecture"] .architecture-visual-canvas {
    min-height: 300px !important;
    height: 300px !important;
    margin: 0 0 14px !important;
  }

  body[data-page="architecture"] .architecture-connection-ledger {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
    height: auto !important;
    margin: 0 0 12px !important;
  }

  body[data-page="architecture"] .architecture-connection-ledger li {
    min-height: 58px !important;
    padding: 7px !important;
  }

  body[data-page="architecture"] .architecture-visual-legend {
    margin: 0 !important;
  }

  body[data-page="architecture"] .architecture-content-workspace {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
  }

  body[data-page="architecture"] .architecture-section-stream {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    /* Keep C03→C07 as one readable vertical sequence. The previous two-
     * column projection made the canonical order look fragmented and caused
     * panels with different content heights to start on uneven rows. */
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
    gap: 16px !important;
    overflow: visible !important;
  }

  body[data-page="architecture"] .architecture-section-stream > [data-c-section] {
    grid-area: auto !important;
    grid-column: 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 16px !important;
    overflow: visible !important;
  }

  body[data-page="architecture"] .architecture-section-head {
    margin: 0 0 12px !important;
    padding: 0 110px 8px 0 !important;
  }

  body[data-page="architecture"] .architecture-section-head h2 {
    font-size: var(--f-size-08, 18px) !important;
    white-space: normal !important;
  }

  body[data-page="architecture"] .architecture-block-grid,
  body[data-page="architecture"] .architecture-security-grid,
  body[data-page="architecture"] .architecture-map-directory {
    min-height: 0 !important;
    overflow: visible !important;
  }

  body[data-page="architecture"] .architecture-block-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body[data-page="architecture"] .architecture-security-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body[data-page="architecture"] .architecture-map-directory ul {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body[data-page="architecture"] .architecture-block,
  body[data-page="architecture"] .security-card,
  body[data-page="architecture"] .architecture-map-directory a {
    min-height: 0 !important;
    overflow: visible !important;
  }

  body[data-page="architecture"] .architecture-context-workspace {
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    overflow: visible !important;
  }

  body[data-page="architecture"] .architecture-related,
  body[data-page="architecture"] .next-path {
    height: auto !important;
    min-height: 0 !important;
    padding: 16px !important;
    overflow: visible !important;
  }

  body[data-page="architecture"] .architecture-related .cards,
  body[data-page="architecture"] .next-path-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

@media (max-width: 1199px) {
  html:has(body[data-page="architecture"]),
  body[data-page="architecture"] {
    height: auto !important;
    min-height: 100%;
    overflow: visible !important;
  }

  body[data-page="architecture"] main.content-field {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 16px 14px 36px !important;
  }

  body[data-page="architecture"] .architecture-section-stream,
  body[data-page="architecture"] .architecture-context-workspace {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body[data-page="architecture"] .architecture-content-workspace {
    width: 100% !important;
    max-width: none !important;
    display: block !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body[data-page="architecture"] .architecture-section-stream {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
    gap: 14px !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  body[data-page="architecture"] .architecture-section-stream {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
  }

  body[data-page="architecture"] .architecture-section-stream > [data-c-section] {
    grid-area: auto !important;
    grid-column: 1 !important;
  }

  body[data-page="architecture"] .architecture-map-structure {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    height: auto !important;
  }

  body[data-page="architecture"] .architecture-visual-canvas {
    min-height: 260px !important;
  }
}

@media (max-width: 767px) {
  body[data-page="architecture"] .context-bar {
    display: block !important;
  }

  body[data-page="architecture"] .context-local-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-top: 8px !important;
  }

  body[data-page="architecture"] main.content-field > [data-kslot="TITLE"] {
    display: block !important;
    padding: 16px !important;
  }

  body[data-page="architecture"] main.content-field > [data-kslot="TITLE"] > * {
    margin: 0 0 10px !important;
  }

  body[data-page="architecture"] .architecture-visual-head,
  body[data-page="architecture"] .architecture-map-structure,
  body[data-page="architecture"] .architecture-connection-ledger,
  body[data-page="architecture"] .architecture-section-stream,
  body[data-page="architecture"] .architecture-context-workspace {
    grid-template-columns: 1fr !important;
  }

  body[data-page="architecture"] .architecture-visual-canvas {
    height: 220px !important;
    min-height: 220px !important;
  }

  body[data-page="architecture"] .architecture-block-grid,
  body[data-page="architecture"] .architecture-security-grid,
  body[data-page="architecture"] .architecture-map-directory ul,
  body[data-page="architecture"] .architecture-related .cards,
  body[data-page="architecture"] .next-path-list {
    grid-template-columns: 1fr !important;
  }
}