/* AENET Systems — full-bleed DGRID canvas + detailed XGRID field.
 * XGRID.SYSTEMS.DETAIL
 *
 * The page shell remains the owner of the fixed workstation rows. This
 * adapter only releases the legacy 1800px shell gutter and paints the
 * coordinate field behind the existing C01–C13 areas.
 */

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

body[data-page="systems"] main.content-field {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  overflow-x: hidden;
  background-color: color-mix(in srgb, var(--bg) 94%, var(--rgbm-navigation) 6%);
  background-image:
    linear-gradient(rgba(77, 163, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 163, 255, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(77, 163, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 163, 255, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(77, 163, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 163, 255, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(77, 163, 255, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 163, 255, 0.13) 1px, transparent 1px),
    linear-gradient(rgba(214, 107, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214, 107, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 224, 224, 0.16) 1px, transparent 1px),
    linear-gradient(180deg, rgba(53, 224, 224, 0.1) 1px, transparent 1px),
    radial-gradient(circle at 52% 12%, rgba(214, 107, 255, 0.08), transparent 42%);
  background-size:
    10px 10px,
    10px 10px,
    25px 25px,
    25px 25px,
    50px 50px,
    50px 50px,
    100px 100px,
    100px 100px,
    250px 250px,
    250px 250px,
    4.1666667% 100%,
    100% 100%,
    100% 100%;
  background-position: 0 0;
  background-attachment: local;
}

body[data-page="systems"] main.content-field > * {
  position: relative;
  z-index: 1;
}

/* The Systems workstation owns its own directory surface. Keep the dark
 * route context strip in the shell flow instead of inheriting the global
 * sticky context-bar layer, which otherwise sits over C01–C12 content. */
body[data-page="systems"] .context-bar {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

/* KAP-GRID owns the directory surface.  The legacy RGBM directory rule
 * intentionally clipped the grid; restore a bounded native scroll surface
 * so the directory remains usable without widening the page or delegating
 * navigation to browser-level scrolling. */
body[data-page="systems"] .systems-directory-grid[data-kap-grid-scroll="true"] {
  min-height: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

@media (min-width: 1200px) {
  body[data-page="systems"] .systems-directory-grid[data-kap-grid-scroll="true"] {
    height: 100% !important;
    align-content: start !important;
    grid-template-rows: none !important;
    grid-auto-rows: max-content !important;
  }

  /* Keep each domain's records in the document flow.  The old workstation
   * density pass stretched two rows and clipped their lists, leaving no
   * overflow for KAP-GRID to own. */
  body[data-page="systems"] .systems-directory-grid[data-kap-grid-scroll="true"] .systems-domain-group {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body[data-page="systems"] .systems-directory-grid[data-kap-grid-scroll="true"] .systems-directory-list {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body[data-page="systems"] .systems-directory-grid[data-kap-grid-scroll="true"] .systems-directory-item,
  body[data-page="systems"] .systems-directory-grid[data-kap-grid-scroll="true"] .planned-system-row {
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }
}

@media (max-width: 1199px) {
  body[data-page="systems"] .systems-directory-grid[data-kap-grid-scroll="true"] {
    max-height: min(62vh, 720px);
  }
}

@media (max-width: 1199px) {
  body[data-page="systems"] > .wrap:not(.topbar) {
    padding-inline: 0 !important;
  }

  body[data-page="systems"] main.content-field {
    padding-inline: 0 !important;
  }
}

/* C12 Systems menu — navigation is a distinct layer from connected routes.
 * FGRID owns the type roles; this adapter only controls grouping, contrast
 * and responsive wrapping so the menu remains readable at every band. */
body[data-page="systems"] .systems-connection-rail {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 5px !important;
  align-content: center;
  min-height: 0;
  height: auto !important;
  overflow: visible !important;
  white-space: normal !important;
}
body[data-page="systems"] .systems-local-menu,
body[data-page="systems"] .systems-connected-surfaces {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
body[data-page="systems"] .systems-local-menu {
  padding-bottom: 5px;
  border-bottom: 1px solid color-mix(in srgb, var(--rgbm-blue) 34%, var(--line));
}
body[data-page="systems"] .systems-local-menu-label,
body[data-page="systems"] .systems-connection-label {
  flex: 0 0 auto;
  color: var(--text);
  letter-spacing: .11em;
}
body[data-page="systems"] .systems-local-menu-items {
  min-width: 0;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 4px;
}
body[data-page="systems"] .systems-local-menu-item {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid rgba(77, 163, 255, .28);
  border-radius: 4px;
  background: rgba(7, 12, 24, .56);
  color: var(--nav);
  text-decoration: none;
  white-space: nowrap;
}
body[data-page="systems"] .systems-local-menu-item code,
body[data-page="systems"] .systems-connection-rail a code {
  color: var(--rgbm-cyan);
}
body[data-page="systems"] .systems-local-menu-item:hover,
body[data-page="systems"] .systems-local-menu-item:focus-visible {
  border-color: var(--rgbm-blue);
  background: rgba(77, 163, 255, .14);
  color: var(--text);
  outline: none;
}
body[data-page="systems"] .systems-connected-surfaces {
  overflow-x: auto;
  scrollbar-width: thin;
  padding-top: 1px;
}
body[data-page="systems"] .systems-connected-surfaces > a {
  flex: 0 0 auto;
}
body[data-page="systems"] .systems-menu-anchor {
  display: block;
  height: 0;
  scroll-margin-top: 12px;
}
body[data-page="systems"] .systems-recent-change-label,
body[data-page="systems"] .systems-recent-action,
body[data-page="systems"] .systems-recent-time,
body[data-page="systems"] .systems-recent-snapshot {
  font-family: inherit;
}

@media (max-width: 767px) {
  body[data-page="systems"] .systems-local-menu,
  body[data-page="systems"] .systems-connected-surfaces {
    align-items: flex-start;
    flex-direction: column;
  }
  body[data-page="systems"] .systems-local-menu-items {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  body[data-page="systems"] .systems-local-menu-item {
    flex: 0 0 auto;
  }
  body[data-page="systems"] .systems-connected-surfaces {
    display: block;
    overflow-x: auto;
    white-space: nowrap !important;
  }
  body[data-page="systems"] .systems-connected-surfaces > * {
    display: inline-flex;
    margin-right: 5px;
  }
}

/* KGRID readability contract — coordinates remain in the DOM as traceable
 * metadata, while the visual layer keeps them out of body copy. The previous
 * always-on slot badges were painted over headings, descriptions and status
 * text on dense directory rows. Show a badge only while inspecting a region;
 * the canonical page coordinate remains visible in the identity rail. */
body[data-page="systems"] main [data-kgrid][data-kgrid-slot]::after {
  display: none !important;
}
body[data-page="systems"] main [data-kgrid][data-kgrid-slot]:is(:hover, :focus-within)::after {
  display: block !important;
  top: 6px !important;
  right: 6px !important;
  z-index: 4;
}
body[data-page="systems"] .systems-section-head,
body[data-page="systems"] .systems-map-contract {
  padding-right: 0 !important;
}
body[data-page="systems"] .domain-summary-card,
body[data-page="systems"] .featured-system-card {
  padding-right: 14px !important;
}
body[data-page="systems"] .systems-directory-item,
body[data-page="systems"] .planned-system-row {
  padding-right: 15px !important;
}
body[data-page="systems"] .systems-local-menu-item code {
  flex: 0 0 auto;
  min-width: 2.5em;
  padding: 2px 4px;
  border: 1px solid color-mix(in srgb, var(--rgbm-cyan) 42%, transparent);
  border-radius: 3px;
  text-align: center;
}
body[data-page="systems"] .systems-connected-surfaces > a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Systems mega-menu + D01–D07 item contract. Each domain is an independent
 * vertical flow. A fixed-height grid with a three-column item layout allowed
 * long names/statuses to collide; the menu now scrolls as one bounded panel
 * and each item gives its code, name and state separate grid areas. */
body[data-page="systems"] .mega-panel-systems[data-display-scale="large-v2"] {
  align-content: start;
  grid-auto-rows: max-content;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable;
}
body[data-page="systems"] .mega-panel-systems[data-display-scale="large-v2"] > .mega-group {
  min-width: 0;
  min-height: 0;
  height: auto;
  align-self: start;
}
body[data-page="systems"] .mega-panel-systems[data-display-scale="large-v2"] > .mega-group .mega-group-items {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: max-content !important;
  align-items: stretch;
}
body[data-page="systems"] .mega-panel-systems[data-display-scale="large-v2"] > .mega-group .mega-item {
  min-width: 0;
  min-height: 48px;
  height: auto;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  grid-template-areas: "code name" "code status";
  align-items: start;
  gap: 3px 9px;
  overflow: hidden;
}
body[data-page="systems"] .mega-panel-systems[data-display-scale="large-v2"] .mega-item-coordinate {
  grid-area: code;
  align-self: start;
  min-width: 0;
}
body[data-page="systems"] .mega-panel-systems[data-display-scale="large-v2"] .mega-item-name {
  grid-area: name;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
body[data-page="systems"] .mega-panel-systems[data-display-scale="large-v2"] .mega-item-status {
  grid-area: status;
  justify-self: start;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.15;
}

/* The directory uses the same D01–D07 domain sequence. Keep every group and
 * row in normal flow so a tall description can never cover the next row. */
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] {
  align-content: start !important;
  grid-auto-rows: max-content !important;
}
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .systems-domain-group {
  position: relative;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .systems-directory-list {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .systems-directory-item,
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .planned-system-row {
  position: relative;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 86px;
  overflow: visible !important;
}
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .systems-directory-item {
  grid-template-columns: 24px minmax(0, 1fr) minmax(78px, 28%);
}
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .directory-main,
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .directory-side {
  min-width: 0;
}
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .directory-side {
  max-width: 100%;
  overflow: hidden;
}
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .system-status-badge,
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .public-boundary-badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .planned-system-row {
  grid-template-columns: max-content minmax(0, 1fr) minmax(78px, 26%);
}

@media (max-width: 767px) {
  body[data-page="systems"] .mega-panel-systems[data-display-scale="large-v2"] > .mega-group .mega-item {
    min-height: 48px;
    grid-template-columns: 3rem minmax(0, 1fr);
  }
  body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .systems-directory-item,
  body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .planned-system-row {
    min-height: 92px;
  }
}

/* Systems directory flow v1 — one ordered domain rail with responsive
 * system-card matrices.  The registry still owns D01–D07 and each SYSTEM_ID;
 * this final display adapter only removes the height-driven two-row layout
 * that made the second row start after the tall infrastructure card.  KAP-GRID
 * remains the single directory scroll owner. */
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  align-items: stretch !important;
  gap: 12px !important;
}

body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .systems-domain-group {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  align-self: stretch !important;
  overflow: visible !important;
}

body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .systems-directory-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(86px, auto);
  align-items: stretch;
  align-content: start;
  gap: 8px;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .systems-directory-item,
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .planned-system-row {
  width: 100%;
  min-width: 0;
  min-height: 86px;
  height: auto !important;
  flex: none !important;
  align-self: stretch;
}

@media (min-width: 768px) and (max-width: 1199px) {
  body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .systems-directory-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .systems-directory-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Systems follows the shared AENORA public background recipe. The Systems
 * photo matrix remains owned by C03; this full-document field supplies the
 * common XGRID/RGBM motion standard behind every systems surface. */
body[data-page="systems"] {
  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="systems"]::before,
body[data-page="systems"]::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
body[data-page="systems"]::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: systems-rgbm-lines-drift 28s linear infinite;
  mix-blend-mode: screen;
}
body[data-page="systems"]::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="systems"] > header.site,
body[data-page="systems"] > .wrap,
body[data-page="systems"] > footer.site {
  position: relative;
  z-index: 1;
}
/* Keep the detailed XGRID field declared at the top of this adapter.  A
 * transparent background here used to reset the shorthand and remove all
 * background layers from the computed main surface.  The RGBM motion field
 * remains on the page pseudo-elements; the main surface must still expose
 * the deterministic XGRID grid for the display contract. */
@keyframes systems-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="systems"]::before { animation: none; }
}

/* Systems topbar projection v2 — keep the canonical global navigation graph
   (A10–A61, A80/A90/A99) while giving the Systems route a readable shell at
   every viewport. This is a visual adapter only: KGRID/DGRID/FGRID/RGBM
   metadata and the single shared topbar remain owned by page.html. */
body[data-page="systems"] > header.site[data-global-header] .topbar-left,
body[data-page="systems"] > header.site[data-global-header] .topbar-right,
body[data-page="systems"] > header.site[data-global-header] .brand,
body[data-page="systems"] > header.site[data-global-header] .brand-name {
  min-width: 0;
}
body[data-page="systems"] > header.site[data-global-header] .brand {
  max-width: 100%;
}
body[data-page="systems"] > header.site[data-global-header] .brand-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-page="systems"] > header.site[data-global-header] .topbar-right > [data-kgrid]::before {
  content: none !important;
}

/* Compact desktop keeps the three DGRID zones but removes visual coordinate
   repetition when the 16-cell navigation band becomes label-tight. */
@media (min-width: 1200px) and (max-width: 1599px) {
  body[data-page="systems"] > header.site[data-global-header] .topbar-system {
    display: none;
  }
  body[data-page="systems"] > header.site[data-global-header] nav.topnav > .nav-item > a[data-route-link]::before {
    display: none;
  }
  body[data-page="systems"] > header.site[data-global-header] nav.topnav > .nav-item > a[data-route-link] {
    padding-inline: 4px;
    font-size: 11px;
  }
  body[data-page="systems"] > header.site[data-global-header] .topbar-grid {
    min-width: 0;
    font-size: 9px;
    padding-inline: 4px;
  }
  body[data-page="systems"] > header.site[data-global-header] .langs {
    gap: 3px;
  }
  body[data-page="systems"] > header.site[data-global-header] .langs a {
    min-width: 25px;
    padding-inline: 3px;
  }
  body[data-page="systems"] > header.site[data-global-header] .langs .lang-flag {
    width: 18px;
  }
}

/* The mobile shell gives the brand a shrinkable column. The prior generic
   mobile rule intentionally preserved max-content branding, which allowed
   the A01 label to collide with the A90 locale and A99 menu controls. */
@media (max-width: 640px) {
  body[data-page="systems"] > header.site[data-global-header] .topbar-left {
    min-width: 0 !important;
    width: 100%;
    flex: 1 1 auto !important;
  }
  body[data-page="systems"] > header.site[data-global-header] .brand {
    min-width: 0 !important;
    width: 100%;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    font-size: 16px;
  }
  body[data-page="systems"] > header.site[data-global-header] .brand-name {
    min-width: 0;
    max-width: 100%;
  }
  body[data-page="systems"] > header.site[data-global-header] .brand-mark {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }
  body[data-page="systems"] > header.site[data-global-header] .brand-mark-svg {
    width: 19px;
    height: 19px;
  }
  body[data-page="systems"] > header.site[data-global-header] .topbar-right {
    flex: 0 0 auto !important;
  }
}

/* At phone widths the descriptor is retained in the accessible label but
   yields the narrow visual slot to the AENET name and controls. */
@media (max-width: 420px) {
  body[data-page="systems"] > header.site[data-global-header] .brand-name b {
    display: none;
  }
}

/* Readability scale v2 — all Systems sub-navigation and registry entries
 * share one comfortable rhythm.  Coordinates remain the KGRID authority;
 * this final route adapter only enlarges the visual targets and text roles.
 */
body[data-page="systems"] .mega-panel-systems[data-display-scale="large-v2"] {
  width: min(1240px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 88px));
  gap: 12px;
  padding: 16px;
}
body[data-page="systems"] .mega-panel-systems[data-display-scale="large-v2"] > .mega-panel-meta {
  padding-bottom: 10px;
  font-size: 12px;
}
body[data-page="systems"] .mega-panel-systems[data-display-scale="large-v2"] > .mega-group {
  padding: 12px;
  border-radius: 8px;
}
body[data-page="systems"] .mega-panel-systems[data-display-scale="large-v2"] > .mega-group .mega-group-label {
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.25;
}
body[data-page="systems"] .mega-panel-systems[data-display-scale="large-v2"] > .mega-group .mega-group-items {
  /* D01–D07 are a local ordered sequence inside each domain group.  Keep
     that sequence in one visual column so the slot code, label and status
     never zig-zag when Thai labels wrap to a second line. */
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row;
  grid-auto-rows: minmax(36px, auto);
  align-items: stretch;
  gap: 5px;
}
body[data-page="systems"] .mega-panel-systems[data-display-scale="large-v2"] > .mega-group .mega-item {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  align-items: center;
  min-height: 40px;
  padding: 8px 10px;
  gap: 10px;
  font-size: 14px;
  line-height: 1.3;
}
body[data-page="systems"] .mega-panel-systems[data-display-scale="large-v2"] > .mega-group .mega-item-name {
  min-width: 0;
  overflow-wrap: anywhere;
}
body[data-page="systems"] .mega-panel-systems[data-display-scale="large-v2"] .mega-item-coordinate {
  font-size: 11px;
}
body[data-page="systems"] .mega-panel-systems[data-display-scale="large-v2"] .mega-item-status {
  font-size: 11px;
}
body[data-page="systems"] .mega-panel-systems[data-display-scale="large-v2"] > .mega-view-all {
  padding: 8px 10px;
  font-size: 14px;
}

/* The shared tablet navigation adapter uses !important for a two-column
 * fallback. Systems D-slots are an ordered local sequence, so keep the
 * same one-column contract at 768–1199px as on the desktop surface. */
@media (min-width: 768px) and (max-width: 1199px) {
  body[data-page="systems"] .mega-panel-systems[data-display-scale="large-v2"] > .mega-group .mega-group-items {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: minmax(36px, auto) !important;
    align-items: stretch !important;
    gap: 5px !important;
  }
}

body[data-page="systems"] .systems-local-menu[data-display-scale="large-v2"] {
  gap: 10px;
  padding: 8px 0 9px;
}
body[data-page="systems"] .systems-local-menu[data-display-scale="large-v2"] .systems-local-menu-label,
body[data-page="systems"] .systems-connection-label {
  font-size: 12px;
  line-height: 1.35;
}
body[data-page="systems"] .systems-local-menu[data-display-scale="large-v2"] .systems-local-menu-items {
  gap: 7px;
}
body[data-page="systems"] .systems-local-menu[data-display-scale="large-v2"] .systems-local-menu-item {
  min-height: 40px;
  padding: 8px 12px;
  gap: 8px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.25;
}
body[data-page="systems"] .systems-local-menu[data-display-scale="large-v2"] .systems-local-menu-item code,
body[data-page="systems"] .systems-connected-surfaces a code {
  font-size: 11px;
  line-height: 1;
}
body[data-page="systems"] .systems-connected-surfaces {
  gap: 9px;
}
body[data-page="systems"] .systems-connected-surfaces > a,
body[data-page="systems"] .systems-connected-surfaces > span {
  min-height: 34px;
  padding: 7px 9px;
  font-size: 13px;
  line-height: 1.3;
}

body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] {
  gap: 10px;
}
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .systems-domain-group {
  padding: 12px;
  border-radius: 8px;
}
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .systems-domain-heading {
  min-height: 52px;
  height: auto;
  padding-bottom: 8px;
  margin-bottom: 8px;
  gap: 5px 10px;
}
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .systems-domain-heading h2 {
  font-size: 17px;
  line-height: 1.25;
}
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .domain-code,
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .systems-domain-count {
  font-size: 12px;
  line-height: 1.25;
}
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .systems-domain-heading .domain-view-link {
  display: inline-block;
  font-size: 12px;
}
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .systems-directory-list {
  gap: 8px;
}
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .systems-directory-item,
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .planned-system-row {
  min-height: 86px;
  padding: 13px 15px;
  gap: 6px 12px;
  border-radius: 7px;
}
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .directory-icon .system-icon-svg {
  width: 20px;
  height: 20px;
}
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .directory-code,
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .planned-system-code {
  font-size: 11px;
  line-height: 1.15;
}
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .directory-name,
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .planned-system-name {
  font-size: 15px;
  line-height: 1.3;
}
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .directory-desc,
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .planned-system-desc {
  font-size: 13px;
  line-height: 1.45;
}
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .directory-actions {
  margin-top: 9px;
  gap: 14px;
  font-size: 12px;
}
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .system-status-badge,
body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .planned-system-domain {
  font-size: 11px;
}

@media (max-width: 767px) {
  body[data-page="systems"] .mega-panel-systems[data-display-scale="large-v2"] {
    width: 100%;
    max-height: 64vh;
    padding: 12px;
  }
  body[data-page="systems"] .mega-panel-systems[data-display-scale="large-v2"] > .mega-group .mega-group-items {
    grid-template-columns: minmax(0, 1fr);
  }
  body[data-page="systems"] .mega-panel-systems[data-display-scale="large-v2"] > .mega-group .mega-item {
    min-height: 44px;
    font-size: 14px;
  }
  body[data-page="systems"] .systems-local-menu[data-display-scale="large-v2"] .systems-local-menu-item {
    min-height: 44px;
    padding: 9px 13px;
    font-size: 14px;
  }
  body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .systems-domain-group {
    padding: 14px;
  }
  body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .systems-directory-item,
  body[data-page="systems"] .systems-directory-grid[data-display-scale="large-v2"] .planned-system-row {
    min-height: 92px;
    padding: 14px;
  }
}