/* =====================================================================
   AiQbiT — shared site styles (linked by every page)
   Page-to-page transitions are drawn by the browser itself
   (CSS View Transitions): nothing covers the page, so nothing can
   ever stay stuck — the back button always works.
   Chrome / Edge 126+, Safari 18.2+. Other browsers: instant navigation.
   ===================================================================== */

@view-transition { navigation: auto; }

/* Outgoing page: brief cyan flare, blur and shrink */
::view-transition-old(root) {
  animation: aq-vt-out .26s cubic-bezier(.4, 0, 1, 1) both;
}
/* Incoming page: resolves out of the glow */
::view-transition-new(root) {
  animation: aq-vt-in .44s cubic-bezier(0, 0, .2, 1) both;
}
html::view-transition {
  background: #010305;
}

@keyframes aq-vt-out {
  to { opacity: 0; transform: scale(.985); filter: blur(6px) brightness(1.35) saturate(1.3); }
}
@keyframes aq-vt-in {
  from { opacity: 0; transform: scale(1.012); filter: blur(8px) brightness(1.5) hue-rotate(-12deg); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* =====================================================================
   Responsive safety net (v2) — applies to every page.
   Low-specificity rules (:where) so each page's own design still wins;
   they only stop content from spilling past the screen edge.
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Never allow a sideways scroll on phones/tablets. `clip` keeps sticky headers working. */
html, body { max-width: 100%; overflow-x: clip; }

/* Media scales down with its container */
:where(img, video) { max-width: 100%; height: auto; }
:where(iframe, embed, object) { max-width: 100%; }

/* Long words, URLs, code names and e-mail addresses wrap instead of overflowing */
:where(h1, h2, h3, h4, h5, h6, p, li, dd, dt, td, th, label, figcaption, blockquote, small, summary) {
  overflow-wrap: break-word;
}
:where(pre) { max-width: 100%; overflow-x: auto; }
:where(table) { max-width: 100%; }

/* Flex/grid children may shrink below their content width */
:where(main, section, article, aside, header, footer, nav) { min-width: 0; }

/* Touch screens: 16px inputs stop iOS from zooming in on focus */
@media (pointer: coarse) and (max-width: 1024px) {
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
    font-size: max(16px, 1em);
  }
}

/* Shared "AIQBIT_SYS" top bar (tracer, vault, login, speed test, U-515 …):
   on phones the links become one swipeable row so the bar stays short
   and never covers the page content. Pages with their own menu button are left alone. */
@media (max-width: 640px) {
  body > nav:has(> .nav-links):not(:has(.menu-btn)) {
    flex-direction: column; align-items: stretch; gap: 6px;
    top: 8px; width: calc(100% - 16px); max-width: none; padding: 10px 12px;
    text-align: center;
  }
  body > nav:has(> .nav-links):not(:has(.menu-btn)) > .nav-links {
    flex-wrap: nowrap; justify-content: flex-start; width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 0 8px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  body > nav:has(> .nav-links):not(:has(.menu-btn)) > .nav-links::-webkit-scrollbar { display: none; }
  body > nav:has(> .nav-links):not(:has(.menu-btn)) > .nav-links > * {
    flex: 0 0 auto; white-space: nowrap; margin: 4px 9px; letter-spacing: 1px;
  }
}