/*
 * OneNav iOS 26 Liquid Glass Plus
 * v1.7.13 — Stability Final
 * Safety-only layer. No visual redesign.
 */

/* Long URLs/user text must not force modal/card horizontal overflow. */
.modal-content,
.dropdown-menu,
.card,
.uc-content-body,
.mf-native-checkin-emoji,
.mf-checkin-board {
  min-width:0;
}

.modal-content p,
.modal-content .text-muted,
.modal-content .io-modal-content,
.uc-content-body p,
.uc-content-body .text-muted {
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Prevent accidental off-screen modal width while preserving OneNav sizes. */
.modal-dialog {
  max-width:calc(100vw - 20px);
}

/* The global OneNav alert must always stay above child-theme modal layers. */
#alert_placeholder.alert-system {
  z-index:2147483647 !important;
}

/* Explicitly keep the custom check-in result immediately below global alert. */
#mf-checkin-result-notice,
#mf-checkin-result-layer {
  z-index:2147483646 !important;
}

/* Avoid hidden horizontal scrollbars from sub-pixel transforms in the two
   most modal-heavy areas without clipping page-level dropdowns. */
#refresh_modal_today_checkin .modal-content,
body.user-center .uc-content-body {
  overflow-x:hidden;
}

/* Touch devices do not need desktop hover compositing. */
@media (hover:none), (pointer:coarse) {
  .posts-item.sites-item,
  body.mf-blog-glass .posts-item {
    will-change:auto !important;
  }
}

/* Consistent accessibility fallback across old accumulated animations. */
@media (prefers-reduced-motion:reduce) {
  .mf-auth-overlay *,
  .mf-mobile-rank-modal *,
  .mf-checkin-result-notice,
  .mf-checkin-result-layer *,
  body.mf-blog-glass .posts-item {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}


/* =========================================================
   v1.8.1.1 — synchronized day/night mode transition
   ========================================================= */

/* During the ~200ms mode handoff all child elements change their theme colors
   in one step instead of each running its own 160~250ms transition.
   This prevents the visible half-white / half-black intermediate frame. */
html.mf-theme-switching body,
html.mf-theme-switching body *,
html.mf-theme-switching body *::before,
html.mf-theme-switching body *::after {
  transition-delay: 0s !important;
  transition-duration: 0s !important;
}

/* One tiny viewport-level veil provides the visual softness that would otherwise
   come from dozens of unsynchronized element transitions. */
#mf-theme-mode-veil {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0;
  background: transparent;
  transition: opacity .16s ease !important;
  will-change: opacity;
}

#mf-theme-mode-veil.to-dark {
  background: rgba(12, 17, 25, .095);
}

#mf-theme-mode-veil.to-light {
  background: rgba(255, 255, 255, .10);
}

#mf-theme-mode-veil.is-visible {
  opacity: 1;
}

/* Do not let the global transition lock cancel the veil's own fade. */
html.mf-theme-switching #mf-theme-mode-veil {
  transition: opacity .16s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  #mf-theme-mode-veil {
    display: none !important;
  }
}