/*
 * JYB tri-web layout contract — added 2026-05-08, p1 release.
 *
 * Loaded after tokens.css / components.css / mobile-operational-polish.css /
 * desktop-operational-polish.css. Its sole job is to give the tablet band
 * (769-1024) a dedicated contract so the PC sidebar offset and mobile
 * bottom-nav rules do not fight each other in that range.
 *
 * Token contracts (tokens.css):
 *   --jyb-bp-tablet-min:  769px
 *   --jyb-bp-tablet-max:  1024px
 *   --jyb-pc-sidebar-w:   18rem
 *   --jyb-tablet-sidebar-w: 0px
 *   --jyb-tablet-gutter:  16px
 *   --jyb-touch-target-min: 44px
 */

/* ── 1. Touch-target floor on phones / tablets (44px per WCAG 2.5.5) ── */
@media (max-width: 1024px) {
  body.mx-authed button,
  body.mx-authed [role="button"],
  body.mx-authed a.btn,
  body.mx-authed input[type="button"],
  body.mx-authed input[type="submit"],
  body.mx-authed nav a {
    min-height: var(--jyb-touch-target-min, 44px);
  }
}

/* ── 2. Tablet contract: 769-1024 ─────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  body.mx-authed #douyin-overlay,
  body.mx-authed #newbie-overlay,
  body.mx-authed #transcribe-overlay,
  body.mx-authed #welcome-overlay,
  body.mx-authed #useradmin-overlay,
  body.mx-authed #copywriting-overlay {
    left: var(--jyb-tablet-sidebar-w, 0px) !important;
    right: 0 !important;
    top: env(safe-area-inset-top, 0px) !important;
    bottom: env(safe-area-inset-bottom, 0px) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  body.mx-authed #douyin-overlay iframe,
  body.mx-authed #newbie-overlay iframe,
  body.mx-authed #transcribe-overlay iframe,
  body.mx-authed #welcome-overlay iframe,
  body.mx-authed #useradmin-overlay iframe,
  body.mx-authed #copywriting-overlay iframe {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important;
    transform: none !important;
  }

  body.mx-authed #mx-mobile-nav {
    display: none !important;
  }
}

/* ── 3. PC contract: >=1025  (preserve existing desktop polish layer) ── */
@media (min-width: 1025px) {
  /* No-op: existing desktop-operational-polish.css owns this band.       */
}

/* ── 4. Mobile <=768 already owned by mobile-operational-polish.css     */