/* =====================================================================
   AENET Cloud Public — MOBILE / RESPONSIVE LAYER
   =====================================================================
   Loaded LAST (after search-display.css + v09.css) so it can override the
   desktop "workstation" adapters. Mobile is NOT a shrunk desktop: it is
   reordered, simplified, touch-friendly and readable while keeping the
   AENET neon/grid identity.

   Breakpoints:
     mobile       ≤ 480px   (320 / 360 / 375 / 390 / 414 / 430)
     mobile-wide  481–640px
     tablet       641–900px
     desktop      > 900px   (existing workstation grid — untouched)
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 1. BASE CONTAINER + SPACING + TYPOGRAPHY (≤900)                     */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
  :root { --radius: 12px; }
  body { font-size: 15px; line-height: 1.7; }
  .wrap { padding-left: 16px; padding-right: 16px; }
  main { padding: 18px 0 48px; }
  h1 { font-size: 26px; line-height: 1.25; margin-bottom: 10px; }
  h2 { font-size: 18px; line-height: 1.3; margin-top: 26px; }
  h3 { font-size: 16px; }
  p { margin: 10px 0; }
  .lede { font-size: 16px; line-height: 1.65; }
  .eyebrow { font-size: 11px; letter-spacing: 1.5px; }
  .panel { padding: 16px; }
  .tag { font-size: 12px; }

  /* Neutralize the desktop 12-column workstation grid so every page stacks
     vertically — without this, `main` keeps its 12-column grid and squeezes
     page-head / workspaces into narrow desktop columns on mobile. */
  body[data-page] main {
    display: block;
    grid-template-columns: none;
    grid-template-rows: none;
  }

  /* v09.css pins the development adapter to min-width:1280px after the
     search-display.css mobile reset — restore a fluid width here. */
  body[data-page="development"] {
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .wrap { padding-left: 14px; padding-right: 14px; }
  h1 { font-size: 24px; }
  .lede { font-size: 15px; }
}

/* ------------------------------------------------------------------ */
/* 2. HEADER / TOPBAR / NAVIGATION                                     */
/*    Row 1: brand + locale switch · Row 2: wrapped nav button grid     */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
  body[data-page] .topbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 12px 16px;
    height: auto;
    align-items: center;
  }
  body[data-page] .topbar-left { order: 1; flex: 0 1 auto; min-width: 0; }
  body[data-page] .topbar-right { order: 2; margin-left: auto; display: flex; align-items: center; gap: 8px; }
  body[data-page] .brand { font-size: 18px; }
  body[data-page] .topbar-system,
  body[data-page] .topbar-grid { display: none !important; }

  /* Navigation becomes a tidy wrapped button grid — easy to tap, no
     horizontal overflow, active route stays highlighted. */
  body[data-page] nav.topnav {
    order: 3;
    flex-basis: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-auto-rows: auto;
    gap: 6px;
    height: auto;
    font-size: 13px;
  }
  body[data-page] nav.topnav a {
    height: auto;
    min-height: 42px;
    padding: 8px 6px;
    white-space: normal;
  }

  /* Locale switch: compact, clear, balanced beside the brand. */
  body[data-page] .langs { margin: 0; display: flex; gap: 6px; }
  body[data-page] .langs a {
    min-width: 40px;
    min-height: 40px;
    padding: 6px 9px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body[data-page] .langs .lang-flag { width: 20px; height: 16px; line-height: 16px; font-size: 15px; }
}

@media (max-width: 480px) {
  body[data-page] nav.topnav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  body[data-page] nav.topnav a { min-height: 44px; font-size: 14px; }
  body[data-page] .brand { font-size: 17px; }
}

/* ------------------------------------------------------------------ */
/* 3. ROUTE CONTEXT BAR                                                */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .route-context { padding: 10px 0 6px; gap: 6px; }
  .route-context nav.breadcrumb { font-size: 13px; padding: 6px 0; }
  .route-context-meta { flex-wrap: wrap; gap: 6px 10px; font-size: 10px; }
}

/* ------------------------------------------------------------------ */
/* 4. PAGE HEAD — clean flow, no heavy desktop card on mobile           */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
  main > .page-head,
  body[data-page] main > .page-head {
    grid-column: auto;
    grid-row: auto;
    display: block;
    padding: 0;
    margin: 0 0 16px;
    border: 0;
    background: transparent;
    justify-content: initial;
  }
  body[data-page] .page-head h1 { font-size: 26px; }
  body[data-page] .page-head .lede { font-size: 15px; line-height: 1.65; margin-bottom: 8px; }
  body[data-page] .page-head .meta-row { font-size: 12px; gap: 8px 14px; }
}

/* ------------------------------------------------------------------ */
/* 5. CARDS + GENERIC GRIDS — collapse to one column                    */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .cards,
  .panel.grid { grid-template-columns: 1fr; gap: 12px; }
  .card { padding: 16px; }
  .card h3 { font-size: 16px; }
  .card p { font-size: 14px; }
}

/* ------------------------------------------------------------------ */
/* 6. HOME                                                             */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
  body[data-page="home"] main { display: block; padding: 0; }
  body[data-page="home"] .home-visual-system {
    display: block;
    min-height: 0;
    padding: 14px;
    margin: 0 0 14px;
  }
  body[data-page="home"] .home-visual-head {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 12px;
  }
  body[data-page="home"] .home-visual-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-page="home"] .home-visual-canvas { min-height: 200px; margin-bottom: 12px; }
  body[data-page="home"] .home-visual-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body[data-page="home"] .home-visual-actions a { min-height: 42px; font-size: 13px; white-space: normal; padding: 6px 4px; }
  body[data-page="home"] main > section:not(.page-head):not(.home-visual-system) {
    margin: 0 0 14px;
    padding: 14px;
  }
  body[data-page="home"] .cards {
    grid-template-columns: 1fr;
    height: auto;
    margin: 0;
  }
  body[data-page="home"] .card { padding: 12px; }
  body[data-page="home"] .card p { display: block; }
}

/* ------------------------------------------------------------------ */
/* 7. SYSTEMS                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
  body[data-page="systems"] .systems-workspace { display: grid; grid-template-columns: 1fr; gap: 12px; }
  body[data-page="systems"] .systems-layer { padding: 14px; }
  body[data-page="systems"] .systems-layer .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body[data-page="systems"] .systems-layer .card p { -webkit-line-clamp: 3; font-size: 13px; }
}
@media (max-width: 480px) {
  body[data-page="systems"] .systems-layer .cards { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/* 8. SYSTEM DETAIL                                                    */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
  body[data-page="system"] .system-workspace { display: block; }
  body[data-page="system"] .system-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
  body[data-page="system"] .system-detail-grid { grid-template-columns: 1fr; gap: 10px; }
  body[data-page="system"] .system-detail-section { padding: 14px; }
  body[data-page="system"] .system-related ul { columns: 1; }
}
@media (max-width: 480px) {
  body[data-page="system"] .system-facts { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/* 9. ARCHITECTURE                                                     */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
  body[data-page="architecture"] .architecture-workspace { display: grid; grid-template-columns: 1fr; gap: 12px; }
  body[data-page="architecture"] .architecture-visual-map { padding: 14px; }
  body[data-page="architecture"] .architecture-visual-head { grid-template-columns: 1fr; gap: 8px; margin-bottom: 10px; }
  body[data-page="architecture"] .architecture-visual-canvas { min-height: 180px; }
  body[data-page="architecture"] .architecture-block-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body[data-page="architecture"] .architecture-block { padding: 10px; }
  body[data-page="architecture"] .architecture-related { padding: 12px; }
  body[data-page="architecture"] .architecture-related .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
}
@media (max-width: 480px) {
  body[data-page="architecture"] .architecture-block-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/* 10. RESEARCH / DEVELOPMENT / API                                    */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
  body[data-page="research"] .research-workspace,
  body[data-page="development"] .development-workspace,
  body[data-page="api"] .api-workspace { display: grid; grid-template-columns: 1fr; gap: 12px; }
  body[data-page="research"] .research-workspace > .cards,
  body[data-page="development"] .development-workspace > .cards,
  body[data-page="api"] .api-endpoints { grid-template-columns: 1fr; gap: 10px; }
  body[data-page="research"] .research-workspace .card,
  body[data-page="development"] .development-workspace .card,
  body[data-page="api"] .api-endpoint { padding: 14px; }
  body[data-page="development"] .launch-roadmap { grid-template-columns: 1fr; gap: 8px; }
  body[data-page="development"] .launch-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  body[data-page="development"] .development-board { grid-template-columns: 1fr; gap: 8px; }
  body[data-page="development"] .development-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
}
@media (max-width: 480px) {
  body[data-page="development"] .launch-phases { grid-template-columns: 1fr; }
  body[data-page="development"] .development-flow { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/* 11. ARTICLE PAGES (research-article / development-entry)             */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
  body[data-page="research-article"] .article-workspace,
  body[data-page="development-entry"] .article-workspace { grid-template-columns: 1fr; gap: 12px; }
  body[data-page="research-article"] .article-content,
  body[data-page="development-entry"] .article-content { padding: 14px 16px; }
  body[data-page="research-article"] .article-body,
  body[data-page="development-entry"] .article-body { font-size: 14px; line-height: 1.7; }
  body[data-page="research-article"] .article-context,
  body[data-page="development-entry"] .article-context { padding: 14px; }
}

/* ------------------------------------------------------------------ */
/* 12. GLOSSARY                                                        */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
  body[data-page="glossary"] .glossary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body[data-page="glossary"] .glossary-term { padding: 12px; }
}
@media (max-width: 480px) {
  body[data-page="glossary"] .glossary-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   13. EARLY ACCESS — THE PRIORITY
   Mobile section order (stacked, full width):
     1. page title / breadcrumb      (page-head — above the workspace)
     2. intro summary                (earlyaccess-visual)
     3. trust / consent / security   (inside the form)
     4. form block                   (registration-mount)
     5. secondary info / privacy     (earlyaccess-side)
     6. footer status                (footer.site)
   ===================================================================== */
@media (max-width: 900px) {
  body[data-page="early-access"] .earlyaccess-workspace {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 14px;
  }
  /* 2. intro summary — compact, full width. */
  body[data-page="early-access"] .earlyaccess-visual {
    grid-column: 1;
    grid-row: 1;
    display: block;
    padding: 14px;
    margin: 0;
  }
  body[data-page="early-access"] .earlyaccess-visual-head {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 12px;
  }
  body[data-page="early-access"] .earlyaccess-visual-head p { font-size: 13px; line-height: 1.55; }
  body[data-page="early-access"] .earlyaccess-live { width: max-content; }

  /* Decorative flow rail becomes a compact, static step strip. */
  body[data-page="early-access"] .earlyaccess-icon-rail {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(7, 12, 24, .6);
  }
  body[data-page="early-access"] .ea-flow-step {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 84px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel2);
  }
  body[data-page="early-access"] .ea-flow-step i { width: 32px; height: 32px; border-radius: 8px; }
  body[data-page="early-access"] .ea-flow-step i::before,
  body[data-page="early-access"] .ea-flow-step i::after { inset: 10px; }
  body[data-page="early-access"] .ea-flow-step b { font-size: 11px; margin-top: 2px; }
  body[data-page="early-access"] .ea-flow-step small { font-size: 9px; }
  body[data-page="early-access"] .ea-flow-line,
  body[data-page="early-access"] .ea-flow-packet { display: none; }

  body[data-page="early-access"] .earlyaccess-status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  body[data-page="early-access"] .earlyaccess-status-strip span { padding: 7px 8px; font-size: 10px; }

  /* 4. form — full width, single column, touch-friendly. */
  body[data-page="early-access"] .registration-mount {
    grid-column: 1;
    grid-row: 2;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
  }
  body[data-page="early-access"] .registration-mount .reg-entry { margin: 0 0 14px; }
  body[data-page="early-access"] .registration-mount .reg-entry p {
    -webkit-line-clamp: unset;
    overflow: visible;
    white-space: normal;
    font-size: 14px;
    line-height: 1.6;
  }
  body[data-page="early-access"] .early-access-form {
    padding: 18px;
    gap: 16px;
    border-radius: 12px;
  }
  body[data-page="early-access"] .early-access-form .reg-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
  }
  body[data-page="early-access"] .early-access-form .ea-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    min-width: 0;
  }
  body[data-page="early-access"] .early-access-form .ea-label { font-size: 12px; letter-spacing: .12em; }
  body[data-page="early-access"] .early-access-form input[type="email"],
  body[data-page="early-access"] .early-access-form select,
  body[data-page="early-access"] .early-access-form textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    font-size: 16px;
    line-height: 1.4;
    border-radius: 10px;
  }
  body[data-page="early-access"] .early-access-form textarea {
    min-height: 100px;
    height: auto;
    resize: vertical;
  }
  body[data-page="early-access"] .early-access-form fieldset.ea-field { grid-column: auto; padding: 0; border: 0; }

  /* Interest areas: ONE column on mobile, two on wider mobile/tablet. */
  body[data-page="early-access"] .ea-interests {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  body[data-page="early-access"] .ea-interest {
    padding: 12px 14px;
    gap: 10px;
    font-size: 15px;
    border-radius: 10px;
    white-space: normal;
  }
  body[data-page="early-access"] .ea-interest input { width: 20px; height: 20px; flex: 0 0 auto; }
  body[data-page="early-access"] .ea-interest span { overflow: visible; text-overflow: clip; }

  /* Consent: checkbox never squeezes the copy. */
  body[data-page="early-access"] .early-access-form .ea-consent {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    font-size: 14px;
    line-height: 1.5;
  }
  body[data-page="early-access"] .early-access-form .ea-consent input { width: 22px; height: 22px; margin-top: 2px; }
  body[data-page="early-access"] .early-access-form .ea-consent span {
    -webkit-line-clamp: unset;
    overflow: visible;
    white-space: normal;
  }

  /* CTA: full width, prominent. */
  body[data-page="early-access"] .early-access-form .btn {
    grid-column: auto;
    width: 100%;
    min-height: 50px;
    padding: 12px 16px;
    font-size: 16px;
    border-radius: 10px;
  }
  body[data-page="early-access"] .early-access-form .reg-security {
    grid-column: auto;
    flex-wrap: wrap;
    white-space: normal;
    font-size: 13px;
    line-height: 1.55;
  }
  body[data-page="early-access"] .registration-mount .cf-turnstile { width: 100%; }
  body[data-page="early-access"] .reg-status { flex-wrap: wrap; font-size: 13px; }

  /* 5. secondary info / privacy panels — stacked under the form. */
  body[data-page="early-access"] .earlyaccess-side {
    grid-column: 1;
    grid-row: 3;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  body[data-page="early-access"] .earlyaccess-panel { padding: 14px; }
  body[data-page="early-access"] .earlyaccess-panel p:last-child { -webkit-line-clamp: unset; overflow: visible; font-size: 13px; line-height: 1.55; }
}

@media (min-width: 481px) and (max-width: 900px) {
  body[data-page="early-access"] .ea-interests { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ */
/* 14. FOOTER / SYSTEM BUS — collapsed, stacked, no overflow            */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
  footer.site { padding: 22px 0 32px; }
  footer.site .grid { flex-direction: column; gap: 10px; }
  .system-bus {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    font-size: 11px;
    margin-top: 16px;
    padding-top: 12px;
  }
  .bus-cell { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 480px) {
  /* Collapse low-priority metadata (UTC time) on phones; the essential
     cells (gateway / ui / core / locale / route / release) stay visible. */
  .system-bus .bus-cell:nth-child(5) { display: none; }
}

/* ------------------------------------------------------------------ */
/* 15. ACCESSIBILITY / POLISH                                           */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
  a, button, input, select, textarea, summary { -webkit-tap-highlight-color: rgba(77, 163, 255, .18); }
  nav.topnav a,
  .langs a,
  .early-access-form .btn { touch-action: manipulation; }
  /* Slightly softer borders on phones reduce visual noise without losing
     the AENET neon identity. */
  .card, .panel, .systems-layer, .system-detail-section,
  .architecture-block, .api-endpoint, .development-card, .glossary-term {
    border-radius: 12px;
  }
}