/* XHub — shared mobile shell (media-query first; complements .is-mobile / [data-device]) */

:root {
  --xhub-mobile-bp: 900px;
  --xhub-tap: 44px;
  --xhub-safe-top: env(safe-area-inset-top, 0px);
  --xhub-safe-right: env(safe-area-inset-right, 0px);
  --xhub-safe-bottom: env(safe-area-inset-bottom, 0px);
  --xhub-safe-left: env(safe-area-inset-left, 0px);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

body {
  overflow-x: clip;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
}

/* Stop accidental drag / text-select on chrome controls */
img,
svg,
.dx-nav-logo,
.brand-dot img,
.brand-wordmark {
  -webkit-user-drag: none;
  user-drag: none;
}

.dx-nav,
.topbar,
.dx-btn,
.dx-icon-btn,
.dx-nav-cta,
.dx-nav-menu,
.site-lang-btn,
.lang-btn,
.icon-btn,
.btn,
.nav-link,
.gk-cta,
.gk-generate-btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.dx-icon-btn,
.dx-nav-menu,
.site-lang-btn,
.lang-btn,
.icon-btn,
#btn-menu {
  user-select: none;
  -webkit-user-select: none;
}

/* Backdrop when hamburger drawer is open */
.xhub-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  touch-action: none;
  overscroll-behavior: none;
}

body.nav-open .xhub-nav-backdrop {
  display: block;
}

body.nav-open {
  overflow: hidden;
}

/* Clones of Discord/GitHub/Get Key — drawer only */
.dx-nav-mobile-extra {
  display: none !important;
}

@media (max-width: 900px) {
  .dx-nav-links.is-open .dx-nav-mobile-extra {
    display: flex !important;
  }
}

/* Early class from mobile-detect.js — same rules as MQ below */
html.is-mobile body.dx-body,
html[data-device="mobile"] body.dx-body {
  padding-left: var(--xhub-safe-left);
  padding-right: var(--xhub-safe-right);
}

@media (max-width: 900px) {
  html.is-mobile,
  html[data-device="mobile"],
  html {
    /* noop marker — keep selectors available for specificity */
  }

  body.dx-body {
    padding-left: var(--xhub-safe-left);
    padding-right: var(--xhub-safe-right);
  }

  .dx-main,
  .tut-page,
  .cw-main,
  .sug-main,
  .wrap {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  .dx-main {
    padding-top: 1.25rem;
    padding-bottom: calc(3.5rem + var(--xhub-safe-bottom));
    padding-left: max(16px, var(--xhub-safe-left));
    padding-right: max(16px, var(--xhub-safe-right));
  }

  .dx-hero,
  .dx-section,
  .dx-footer {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .dx-hero-lead,
  .dx-section-lead,
  .dx-hint,
  .gk-desc,
  .gk-trust {
    margin-left: auto;
    margin-right: auto;
    max-width: 36rem;
  }

  .gk-actions,
  .hub-cta-row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 22rem;
    margin-left: auto;
    margin-right: auto;
  }

  .gk-actions .dx-btn,
  .gk-actions .gk-cta,
  .hub-cta-row .btn,
  .hub-cta-row a {
    width: 100%;
    justify-content: center;
    min-height: var(--xhub-tap);
  }

  .dx-btn,
  .dx-btn--sm,
  .dx-nav-cta,
  .gk-cta,
  .gk-generate-btn {
    min-height: var(--xhub-tap);
  }

  input,
  select,
  textarea,
  .cw-input,
  .sug-form .cw-input,
  .sug-textarea,
  .gk-code-input {
    width: 100%;
    max-width: 100%;
    min-height: var(--xhub-tap);
    font-size: 16px; /* prevent iOS zoom */
    box-sizing: border-box;
  }

  .toast {
    left: 12px;
    right: 12px;
    bottom: calc(16px + var(--xhub-safe-bottom));
    max-width: none;
  }

  .xhub-scroll-top {
    bottom: calc(18px + var(--xhub-safe-bottom));
    right: max(14px, var(--xhub-safe-right));
    width: var(--xhub-tap);
    height: var(--xhub-tap);
  }
}

/* Coarse pointer: reinforce tap targets even on wide tablets */
@media (hover: none) and (pointer: coarse) {
  .dx-btn,
  .dx-icon-btn,
  .dx-nav-cta,
  .site-lang-btn,
  .lang-btn,
  .btn,
  .nav-link,
  .icon-btn {
    min-height: var(--xhub-tap);
  }

  .dx-icon-btn,
  .dx-nav-menu,
  #btn-menu,
  .icon-btn {
    min-width: var(--xhub-tap);
    width: var(--xhub-tap);
    height: var(--xhub-tap);
  }
}