/*
 * OneNav iOS 26 Liquid Glass Plus
 * v1.7.12 — Final Glass Polish
 *
 * Visual/compatibility finishing layer only.
 * No templates, AJAX, ranking, bookmark, payment or check-in logic is replaced.
 */

:root {
  /* Final canonical glass hierarchy */
  --mf26-glass-main: rgba(255,255,255,.76);
  --mf26-glass-secondary: rgba(255,255,255,.64);
  --mf26-glass-control: rgba(255,255,255,.50);
  --mf26-glass-border: rgba(255,255,255,.76);
  --mf26-glass-inner: rgba(255,255,255,.70);
  --mf26-glass-line: rgba(93,118,151,.105);
  --mf26-glass-text: #2d3747;
  --mf26-glass-muted: #7e8999;
  --mf26-glass-shadow-main:
    0 18px 48px rgba(33,53,82,.095),
    0 4px 14px rgba(33,53,82,.045),
    inset 0 1px 0 rgba(255,255,255,.76);
  --mf26-glass-shadow-card:
    0 8px 24px rgba(33,53,82,.055),
    inset 0 1px 0 rgba(255,255,255,.64);
  --mf26-glass-shadow-hover:
    0 14px 34px rgba(33,53,82,.095),
    inset 0 1px 0 rgba(255,255,255,.78);
  --mf26-glass-blur-main: 24px;
  --mf26-glass-blur-secondary: 14px;
  --mf26-glass-radius-main: 22px;
  --mf26-glass-radius-card: 16px;
  --mf26-glass-radius-control: 12px;

  /* Keep existing theme selectors on the same final palette. */
  --mf-glass: rgba(255,255,255,.72);
  --mf-glass-strong: rgba(255,255,255,.82);
  --mf-border: rgba(255,255,255,.78);
  --mf-shadow: 0 10px 30px rgba(31,50,79,.065),0 2px 8px rgba(31,50,79,.03);
  --mf-shadow-hover: 0 15px 36px rgba(31,50,79,.105),0 4px 12px rgba(31,50,79,.045);
}

html.io-black-mode {
  --mf26-glass-main: rgba(24,30,41,.84);
  --mf26-glass-secondary: rgba(30,37,50,.72);
  --mf26-glass-control: rgba(39,48,63,.58);
  --mf26-glass-border: rgba(255,255,255,.105);
  --mf26-glass-inner: rgba(255,255,255,.055);
  --mf26-glass-line: rgba(194,211,232,.075);
  --mf26-glass-text: #edf3fa;
  --mf26-glass-muted: #98a6b8;
  --mf26-glass-shadow-main:
    0 20px 54px rgba(0,0,0,.30),
    0 4px 16px rgba(0,0,0,.17),
    inset 0 1px 0 rgba(255,255,255,.045);
  --mf26-glass-shadow-card:
    0 10px 26px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.035);
  --mf26-glass-shadow-hover:
    0 17px 40px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.055);

  /* Dark glass is graphite/blue-black rather than washed-out gray. */
  --mf-glass: rgba(25,31,42,.78);
  --mf-glass-strong: rgba(29,36,49,.88);
  --mf-border: rgba(255,255,255,.105);
  --mf-shadow: 0 12px 32px rgba(0,0,0,.24);
  --mf-shadow-hover: 0 18px 40px rgba(0,0,0,.31);
}

/* =========================================================
   1. Primary glass — one consistent top-level hierarchy
   ========================================================= */
.header-nav,
.header-nav.blur-bg,
.header-nav.blur-bg-20,
.modal-content,
.mobile-header .mobile-nav {
  border-color: var(--mf26-glass-border) !important;
  box-shadow: var(--mf26-glass-shadow-main) !important;
}

/* Header remains transparent enough to read the page beneath without turning white. */
.header-nav,
.header-nav.blur-bg,
.header-nav.blur-bg-20 {
  background:
    linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.015)),
    var(--mf26-glass-main) !important;
  -webkit-backdrop-filter: blur(var(--mf26-glass-blur-main)) saturate(165%) !important;
  backdrop-filter: blur(var(--mf26-glass-blur-main)) saturate(165%) !important;
}

.modal-content {
  background:
    linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.015)),
    var(--mf26-glass-main) !important;
  -webkit-backdrop-filter: blur(var(--mf26-glass-blur-main)) saturate(155%) !important;
  backdrop-filter: blur(var(--mf26-glass-blur-main)) saturate(155%) !important;
}

html.io-black-mode .header-nav,
html.io-black-mode .header-nav.blur-bg,
html.io-black-mode .header-nav.blur-bg-20,
html.io-black-mode .modal-content {
  background:
    linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,0)),
    var(--mf26-glass-main) !important;
}

/* =========================================================
   2. Secondary glass — cards / menus / list surfaces
   ========================================================= */
.card:not(.card-color),
.aside-card,
.dropdown-menu,
.header-tools .sub-menu,
.navbar-header .sub-menu,
.new-posts-btn .sub-menu,
.min-nav .sub-menu,
.search-smart-tips {
  border-color: var(--mf26-glass-border) !important;
  box-shadow: var(--mf26-glass-shadow-card) !important;
}

/* Reduce the bright-white veil in daylight while keeping the glass depth. */
html:not(.io-black-mode) .card:not(.card-color),
html:not(.io-black-mode) .aside-card {
  background-color: var(--mf26-glass-secondary) !important;
}

/* Dark cards stay graphite, not milky gray. */
html.io-black-mode .card:not(.card-color),
html.io-black-mode .aside-card,
html.io-black-mode .dropdown-menu {
  background-color: var(--mf26-glass-secondary) !important;
}

/* Site cards: still glass, but the favicon/text remain the visual focus. */
.posts-item.sites-item {
  background: var(--mf26-glass-secondary) !important;
  border-color: var(--mf26-glass-border) !important;
  box-shadow: var(--mf26-glass-shadow-card) !important;
}

@media (hover:hover) and (pointer:fine) {
  .card:not(.card-color):hover,
  .posts-item.sites-item:hover {
    box-shadow: var(--mf26-glass-shadow-hover) !important;
  }
}

/* =========================================================
   3. Control glass — buttons / inputs do not need another blur layer
   ========================================================= */
.form-control,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea {
  background-color: var(--mf26-glass-control) !important;
  border-color: var(--mf26-glass-line) !important;
  box-shadow: inset 0 1px 0 var(--mf26-glass-inner) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.io-black-mode .form-control,
html.io-black-mode input[type="text"],
html.io-black-mode input[type="email"],
html.io-black-mode input[type="url"],
html.io-black-mode input[type="password"],
html.io-black-mode input[type="search"],
html.io-black-mode input[type="number"],
html.io-black-mode select,
html.io-black-mode textarea {
  color: var(--mf26-glass-text) !important;
  background-color: var(--mf26-glass-control) !important;
  border-color: var(--mf26-glass-line) !important;
}

/* =========================================================
   4. Nested glass — avoid glass-on-glass haze
   ========================================================= */
/* The main modal/panel carries the blur. Small inner cards use translucency only.
   This fixes the "a sheet of glass over the text" appearance and lowers GPU work. */
.modal-content .card:not(.card-color),
.modal-content .dropdown-menu,
.modal-content .form-control,
.modal-content input,
.modal-content select,
.modal-content textarea,
#refresh_modal_today_checkin .mf-native-checkin-emoji,
#refresh_modal_today_checkin .mf-native-checkin-emoji-item,
#refresh_modal_today_checkin .mf-native-checkin-emoji-readout {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* =========================================================
   5. Typography clarity — especially WebKit / iPhone
   ========================================================= */
.modal-content,
.dropdown-menu,
.card:not(.card-color),
.header-nav,
.mobile-header .mobile-nav {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html.mf-ios .modal-content *,
html.mf-ios .dropdown-menu *,
html.mf-ios .header-nav *,
html.mf-ios .mobile-header .mobile-nav * {
  text-shadow: none;
}

/* Do not force 3D transforms on text-bearing glass layers in iOS Safari. */
html.mf-ios .modal-content,
html.mf-ios .dropdown-menu,
html.mf-ios .header-nav,
html.mf-ios .mobile-header .mobile-nav {
  -webkit-transform-style: flat;
  transform-style: flat;
}

/* =========================================================
   6. Unified modal motion
   ========================================================= */
.modal.fade .modal-dialog {
  transform: translateY(8px) scale(.985);
  transition:
    transform .22s cubic-bezier(.22,.78,.28,1),
    opacity .18s ease;
}

.modal.show .modal-dialog {
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog,
  .modal.show .modal-dialog {
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   7. Mobile glass — keep main glass, simplify inner layers
   ========================================================= */
@media (max-width:767.98px) {
  :root {
    --mf26-glass-blur-main: 16px;
    --mf26-glass-blur-secondary: 8px;
    --mf26-glass-shadow-main:
      0 12px 30px rgba(33,53,82,.075),
      0 3px 10px rgba(33,53,82,.035),
      inset 0 1px 0 rgba(255,255,255,.70);
    --mf26-glass-shadow-card:
      0 5px 15px rgba(33,53,82,.04),
      inset 0 1px 0 rgba(255,255,255,.58);
  }

  html.io-black-mode {
    --mf26-glass-shadow-main:
      0 14px 34px rgba(0,0,0,.24),
      0 3px 11px rgba(0,0,0,.12),
      inset 0 1px 0 rgba(255,255,255,.035);
    --mf26-glass-shadow-card:
      0 6px 17px rgba(0,0,0,.13),
      inset 0 1px 0 rgba(255,255,255,.025);
  }

  /* Main layers retain the iOS-26 feel. */
  .header-nav,
  .header-nav.blur-bg,
  .header-nav.blur-bg-20,
  .modal-content,
  .mobile-header .mobile-nav {
    -webkit-backdrop-filter: blur(var(--mf26-glass-blur-main)) saturate(145%) !important;
    backdrop-filter: blur(var(--mf26-glass-blur-main)) saturate(145%) !important;
  }

  /* Secondary cards are translucent but do not each create a new GPU blur surface. */
  .card:not(.card-color),
  .aside-card,
  .posts-item.sites-item,
  .modal-content .card:not(.card-color),
  #refresh_modal_today_checkin .mf-native-checkin-emoji,
  #refresh_modal_today_checkin .mf-native-checkin-emoji-item {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .posts-item.sites-item {
    background-color: rgba(255,255,255,.72) !important;
  }

  html.io-black-mode .posts-item.sites-item {
    background-color: rgba(31,39,52,.76) !important;
  }

  /* Touch has no true hover; avoid wasted hover shadow/compositing work. */
  .card:not(.card-color):hover,
  .posts-item.sites-item:hover {
    box-shadow: var(--mf26-glass-shadow-card) !important;
  }
}

/* iPhone/iPad: slightly less saturation prevents white haze and text bleed. */
@media (max-width:767.98px) {
  html.mf-ios .header-nav,
  html.mf-ios .header-nav.blur-bg,
  html.mf-ios .header-nav.blur-bg-20,
  html.mf-ios .modal-content,
  html.mf-ios .mobile-header .mobile-nav {
    -webkit-backdrop-filter: blur(15px) saturate(135%) !important;
    backdrop-filter: blur(15px) saturate(135%) !important;
  }
}

/* =========================================================
   8. Low-capability fallback — stay attractive without expensive blur
   ========================================================= */
html.mf-performance-lite {
  --mf26-glass-blur-main: 10px;
  --mf26-glass-blur-secondary: 0px;
}

html.mf-performance-lite .card:not(.card-color),
html.mf-performance-lite .aside-card,
html.mf-performance-lite .posts-item.sites-item,
html.mf-performance-lite .dropdown-menu {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.mf-performance-lite:not(.io-black-mode) .card:not(.card-color),
html.mf-performance-lite:not(.io-black-mode) .aside-card,
html.mf-performance-lite:not(.io-black-mode) .posts-item.sites-item {
  background-color: rgba(255,255,255,.82) !important;
}

html.io-black-mode.mf-performance-lite .card:not(.card-color),
html.io-black-mode.mf-performance-lite .aside-card,
html.io-black-mode.mf-performance-lite .posts-item.sites-item {
  background-color: rgba(29,36,49,.88) !important;
}

/* No backdrop-filter support: readable solid fallback. */
html.mf-no-backdrop:not(.io-black-mode) .header-nav,
html.mf-no-backdrop:not(.io-black-mode) .modal-content,
html.mf-no-backdrop:not(.io-black-mode) .dropdown-menu {
  background-color: rgba(250,252,255,.97) !important;
}

html.io-black-mode.mf-no-backdrop .header-nav,
html.io-black-mode.mf-no-backdrop .modal-content,
html.io-black-mode.mf-no-backdrop .dropdown-menu {
  background-color: rgba(27,34,46,.97) !important;
}

/* =========================================================
   9. Check-in modal final readability
   ========================================================= */
#refresh_modal_today_checkin .mf-native-checkin-emoji {
  background: rgba(247,251,255,.68) !important;
  border-color: rgba(105,142,190,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76) !important;
}

html.io-black-mode #refresh_modal_today_checkin .mf-native-checkin-emoji {
  background: rgba(30,39,52,.68) !important;
  border-color: rgba(180,205,235,.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
}

#refresh_modal_today_checkin .mf-native-checkin-emoji-readout {
  box-shadow: none !important;
}

/* =========================================================
   10. Final safety
   ========================================================= */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
  .header-nav,
  .modal-content,
  .dropdown-menu,
  .card:not(.card-color),
  .posts-item.sites-item {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}