/* Glass V1 mobile polish — additive, layout-safe, preserves approved visuals.
   Shared navigation for modern + legacy families; conservative rhythm fixes. */

@media (max-width:1040px) {
  /* The two DOM families keep their native toggle mechanisms but present the
     same comfortable link targets, opacity and keyboard-visible focus. */
  :is(.site-header .mobile-nav,.v9-header .v9-menu-items) {
    border:1px solid rgba(163,197,239,.9);
    background:rgba(248,252,255,.985);
    border-radius:0 0 18px 18px;
    box-shadow:0 22px 48px rgba(19,64,129,.2);
    backdrop-filter:blur(20px) saturate(130%);
    -webkit-backdrop-filter:blur(20px) saturate(130%);
    max-height:min(75dvh,480px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  :is(.site-header .mobile-nav,.v9-header .v9-menu-items) a {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    min-height:48px;
    padding:11px 14px;
    border-radius:10px;
    font-family:Alexandria,Tahoma,Arial,sans-serif;
    font-size:13px;
    line-height:1.75;
    font-weight:700;
    color:#15355c;
    text-decoration:none;
  }
  :is(.site-header .mobile-nav,.v9-header .v9-menu-items) a:is(:hover,:focus-visible,.active,[aria-current="page"]) {
    color:#0862db;
    background:#e7f2ff;
  }
  .v9-header .v9-menu-items {
    left:-10px;
    right:auto;
    top:calc(100% + 16px);
    width:calc(100vw - 32px);
    min-width:0;
    padding:14px;
    gap:3px;
  }
  .site-header .mobile-nav {
    padding:14px;
    gap:3px;
  }
  .v9-header .v9-mobile-menu summary,
  .site-header .nav-toggle {
    min-width:44px;
    min-height:44px;
    border-radius:12px;
    border:1px solid #bfd8f6;
    background:rgba(255,255,255,.87);
    box-shadow:0 4px 14px rgba(31,89,153,.07);
    color:#0d2b54;
  }
  .v9-header .v9-mobile-menu summary:hover,
  .site-header .nav-toggle:hover { background:#edf6ff; }
}

/* Keep the compact header reliable before it has space for three elements.
   The same decision applies to both header families. */
@media (max-width:389px) {
  .site-header .header-cta,.v9-header .v9-navcta {display:none !important}
  .site-header .header-row {
    justify-content:space-between;
    margin-inline:12px;
    gap:8px;
    min-width:0;
  }
  .site-header .nav-toggle {flex:0 0 44px;padding:8px}
}
@media (min-width:390px) and (max-width:1040px) {
  .v9-header .v9-navcta {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:9px 10px;
    font-size:10px;
    line-height:1.5;
    border-radius:12px;
  }
  .site-header .header-cta {padding-inline:8px;font-size:10px}
}
@media (max-width:620px) {
  /* Pages with many consecutive sections: reduce repeated outer gutters,
     but never hide text, diagrams or forms and never change section order. */
  .v13-legacy main:has(> .content-hero) > :is(.section,.cl-section) {
    padding-block:42px;
  }
  .v13-legacy main:has(> .p8-hero) > :is(.p8-section,.cl-section) {
    padding-block:42px;
  }
  .v13-legacy main:has(> .p8-hero) > .v12-scene-section {
    padding-block:46px;
  }
  .v13-legacy main:has(> .content-hero) :is(.intro,.section-head),
  .v13-legacy main:has(> .p8-hero) :is(.p8-heading,.intro) {
    margin-bottom:20px;
  }
  /* Shorten only decorative gaps between cards; keep internal reading
     line-height and all deliverable lists exactly as authored. */
  .v13-legacy main:has(> .p8-hero) :is(.p8-cards,.p8-grid,.p8-modules,.p8-results) {
    row-gap:12px;
  }
  /* Avoid the floating back-to-top affordance crowding the last lines. */
  .blog-page .blog-backtop {
    left:12px;
    bottom:max(14px,env(safe-area-inset-bottom));
  }
}
@media (prefers-reduced-motion:reduce) {
  :is(.site-header .mobile-nav,.v9-header .v9-menu-items) {
    scroll-behavior:auto;
    transition:none !important;
  }
}