/* GiC Membership Badge V3 — compact verified tier, no entitlement changes.
 * Scoped to the mobile drawer and respects light/dark theme.
 * FREE: neutral silver; CORE: matte champagne gold; PRO: deeper gilded gold.
 */
@media (max-width: 850px) {
  /* A roomier, stable account row. No-level plans move to the centered lower row. */
  html body #mobileNav.gic-premium-drawer-v4 .gic-v4-account {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    grid-auto-rows: minmax(0, auto) !important;
    align-items: center !important;
    column-gap: 10px !important;
    row-gap: 9px !important;
    padding: 13px 12px !important;
    min-width: 0 !important;
  }
  html body #mobileNav.gic-premium-drawer-v4 .gic-v4-account .gic-v4-avatar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
  }
  html body #mobileNav.gic-premium-drawer-v4 .gic-v4-account .gic-v4-user-info {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  html body #mobileNav.gic-premium-drawer-v4 .gic-v4-account:has(.gic-v4-smart-badge:not(.has-level)) .gic-v4-user-info {
    grid-column: 2 / -1 !important;
  }
  html body #mobileNav.gic-premium-drawer-v4 button.gic-v4-plan.gic-v4-smart-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    justify-self: center !important;
    gap: 9px !important;
    box-sizing: border-box !important;
    width: max-content !important;
    max-width: 100% !important;
    min-height: 37px !important;
    margin: 0 !important;
    padding: 9px 15px !important;
    border: 1px solid !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: .045em !important;
    line-height: 1.2 !important;
    font-variant-numeric: tabular-nums;
    text-align: center !important;
    white-space: nowrap !important;
    cursor: pointer;
    transition: box-shadow .16s ease, filter .16s ease !important;
    -webkit-tap-highlight-color: transparent;
  }
  html body #mobileNav.gic-premium-drawer-v4 button.gic-v4-smart-badge:not(.has-level) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: center !important;
    min-width: 154px !important;
    max-width: 100% !important;
  }
  html body #mobileNav.gic-premium-drawer-v4 button.gic-v4-smart-badge.has-level {
    grid-column: 3 !important;
    grid-row: 1 !important;
    min-width: 104px !important;
    padding-inline: 12px !important;
  }
  html body #mobileNav.gic-premium-drawer-v4 button.gic-v4-smart-badge .gic-v4-badge-level,
  html body #mobileNav.gic-premium-drawer-v4 button.gic-v4-smart-badge .gic-v4-badge-tier {
    color: inherit !important;
    line-height: 1.2 !important;
    text-align: center !important;
    letter-spacing: inherit !important;
  }
  html body #mobileNav.gic-premium-drawer-v4 button.gic-v4-smart-badge .gic-v4-badge-level {
    font-size: 11px !important;
    font-weight: 900 !important;
  }
  html body #mobileNav.gic-premium-drawer-v4 button.gic-v4-smart-badge .gic-v4-badge-divider {
    display: block !important;
    width: 1px !important;
    flex: 0 0 1px !important;
    height: 16px !important;
    border-radius: 1px !important;
    background: currentColor !important;
    opacity: .42 !important;
  }
  /* FREE: neutral silver, unambiguously distinct from paid status. */
  html body > #mobileNav.gic-premium-drawer-v4 button.gic-v4-smart-badge.is-free,
  html body #mobileNav.gic-premium-drawer-v4 button.gic-v4-smart-badge.is-free {
    color: #4b5557 !important;
    background: linear-gradient(145deg, #fcfcfb 0%, #e3e6e5 100%) !important;
    border-color: #b9c2c1 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 4px 12px rgba(27,40,41,.10) !important;
  }
  /* CORE: soft satin champagne, intentionally understated. */
  html body > #mobileNav.gic-premium-drawer-v4 button.gic-v4-smart-badge.is-core,
  html body #mobileNav.gic-premium-drawer-v4 button.gic-v4-smart-badge.is-core {
    color: #684d25 !important;
    background: linear-gradient(135deg, #fff7e3 0%, #efdba9 58%, #e6cc91 100%) !important;
    border-color: #c6a56c !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 12px rgba(117,84,34,.11) !important;
  }
  /* PRO: richer gold and a subtle highlight, not a glaring yellow pill. */
  html body > #mobileNav.gic-premium-drawer-v4 button.gic-v4-smart-badge.is-pro,
  html body #mobileNav.gic-premium-drawer-v4 button.gic-v4-smart-badge.is-pro {
    color: #493212 !important;
    background: linear-gradient(130deg, #fff3cf 0%, #e7bc68 58%, #c99a4b 100%) !important;
    border-color: #b98b42 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 5px 15px rgba(133,94,33,.19) !important;
  }
  /* Unknown membership must remain neutral, never imitate Free. */
  html body #mobileNav.gic-premium-drawer-v4 button.gic-v4-smart-badge.is-unknown {
    color: #4d5960 !important;
    background: linear-gradient(145deg, #f5f6f6, #dce1e1) !important;
    border-color: #bac5c9 !important;
    box-shadow: none !important;
  }
  html body #mobileNav.gic-premium-drawer-v4 button.gic-v4-smart-badge:focus-visible {
    outline: 2px solid #d8b46f !important;
    outline-offset: 3px !important;
  }
  html body #mobileNav.gic-premium-drawer-v4 button.gic-v4-smart-badge:hover {
    filter: brightness(1.035) !important;
  }
  /* Dark mode: non-neon grey and two legible gold tiers. */
  html[data-gic-theme="dark"] body > #mobileNav.gic-premium-drawer-v4 button.gic-v4-smart-badge.is-free,
  html[data-gic-theme="dark"] body #mobileNav.gic-premium-drawer-v4 button.gic-v4-smart-badge.is-free {
    color: #f1f1ee !important;
    background: linear-gradient(145deg, #414b4a 0%, #2e3938 100%) !important;
    border-color: #899492 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 4px 13px rgba(0,12,12,.27) !important;
  }
  html[data-gic-theme="dark"] body > #mobileNav.gic-premium-drawer-v4 button.gic-v4-smart-badge.is-core,
  html[data-gic-theme="dark"] body #mobileNav.gic-premium-drawer-v4 button.gic-v4-smart-badge.is-core {
    color: #fce6b9 !important;
    background: linear-gradient(135deg, #685339 0%, #4c3e2c 100%) !important;
    border-color: #af8e5c !important;
    box-shadow: inset 0 1px 0 rgba(255,231,179,.14), 0 5px 14px rgba(0,10,8,.26) !important;
  }
  html[data-gic-theme="dark"] body > #mobileNav.gic-premium-drawer-v4 button.gic-v4-smart-badge.is-pro,
  html[data-gic-theme="dark"] body #mobileNav.gic-premium-drawer-v4 button.gic-v4-smart-badge.is-pro {
    color: #fff4da !important;
    background: linear-gradient(140deg, #a48250 0%, #79592e 60%, #5c4427 100%) !important;
    border-color: #d3ae6a !important;
    box-shadow: inset 0 1px 0 rgba(255,245,218,.25), 0 5px 17px rgba(0,8,6,.31) !important;
  }
  html[data-gic-theme="dark"] body #mobileNav.gic-premium-drawer-v4 button.gic-v4-smart-badge.is-unknown {
    color: #e0e5e2 !important;
    background: linear-gradient(140deg, #3b4849, #283637) !important;
    border-color: #637674 !important;
  }
}
@media (max-width: 340px) {
  html body #mobileNav.gic-premium-drawer-v4 button.gic-v4-smart-badge {
    font-size: 10px !important;
    padding-inline: 10px !important;
    min-width: 0 !important;
  }
  html body #mobileNav.gic-premium-drawer-v4 .gic-v4-account {
    column-gap: 7px !important;
  }
}
/* Specificity bridge for the older Identity V3 !important layout rules. */
@media (max-width: 850px) {
  html body > #mobileNav.mobile-menu.gic-premium-drawer-v4 button.gic-v4-plan.gic-v4-smart-badge.has-level {
    display: inline-flex !important;
    grid-template-columns: none !important;
    width: max-content !important;
    min-width: 104px !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 37px !important;
    padding: 9px 12px !important;
    flex: none !important;
    gap: 9px !important;
  }
  html body > #mobileNav.mobile-menu.gic-premium-drawer-v4 button.gic-v4-plan.gic-v4-smart-badge:not(.has-level) {
    width: max-content !important;
    min-width: 154px !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 37px !important;
    padding: 9px 15px !important;
    flex: none !important;
  }
  html body > #mobileNav.mobile-menu.gic-premium-drawer-v4 button.gic-v4-plan.gic-v4-smart-badge .gic-v4-badge-level,
  html body > #mobileNav.mobile-menu.gic-premium-drawer-v4 button.gic-v4-plan.gic-v4-smart-badge .gic-v4-badge-tier {
    color: inherit !important;
    font: 850 11px/1.2 Manrope,system-ui,sans-serif !important;
    letter-spacing: .045em !important;
  }
  html body > #mobileNav.mobile-menu.gic-premium-drawer-v4 button.gic-v4-plan.gic-v4-smart-badge .gic-v4-badge-divider {
    width: 1px !important;
    height: 16px !important;
    opacity: .42 !important;
  }
}


/* GIC BADGE POSITION V4 — the no-level badge must have its OWN row.
   The previous V3 used grid-auto-rows:minmax(0,auto) while the inherited
   account copy could extend below its row, so the badge covered the subtitle.
   V4 reserves the full first row for the user's name + subtitle; visual only. */
@media (max-width: 850px) {
  html body > #mobileNav.mobile-menu.gic-premium-drawer-v4 .gic-v4-account:has(button.gic-v4-smart-badge:not(.has-level)) {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    grid-template-rows: minmax(62px, max-content) auto !important;
    grid-auto-rows: auto !important;
    align-items: start !important;
    column-gap: 11px !important;
    row-gap: 12px !important;
    padding: 13px 13px 16px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html body > #mobileNav.mobile-menu.gic-premium-drawer-v4 .gic-v4-account:has(button.gic-v4-smart-badge:not(.has-level)) .gic-v4-avatar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;
  }
  html body > #mobileNav.mobile-menu.gic-premium-drawer-v4 .gic-v4-account:has(button.gic-v4-smart-badge:not(.has-level)) .gic-v4-user-info {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: stretch !important;
    align-self: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 4px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  html body > #mobileNav.mobile-menu.gic-premium-drawer-v4 .gic-v4-account:has(button.gic-v4-smart-badge:not(.has-level)) .gic-v4-user-info strong.gic-v4-display-name {
    max-width: 100% !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }
  html body > #mobileNav.mobile-menu.gic-premium-drawer-v4 .gic-v4-account:has(button.gic-v4-smart-badge:not(.has-level)) .gic-v4-user-info small {
    display: block !important;
    font-size: 10.5px !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: break-word !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
  }
  html body > #mobileNav.mobile-menu.gic-premium-drawer-v4 .gic-v4-account button.gic-v4-plan.gic-v4-smart-badge:not(.has-level) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    align-self: center !important;
    justify-self: center !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    min-width: 166px !important;
    width: max-content !important;
    max-width: calc(100% - 8px) !important;
    height: auto !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
  }
  /* With a level, the short badge remains in the right-hand column. */
  html body > #mobileNav.mobile-menu.gic-premium-drawer-v4 .gic-v4-account:has(button.gic-v4-smart-badge.has-level) {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) max-content !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    column-gap: 9px !important;
    row-gap: 0 !important;
    height: auto !important;
    min-height: 70px !important;
    padding: 12px !important;
  }
  html body > #mobileNav.mobile-menu.gic-premium-drawer-v4 .gic-v4-account button.gic-v4-plan.gic-v4-smart-badge.has-level {
    position: static !important;
    transform: none !important;
    grid-row: 1 !important;
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
  }
}
@media (max-width: 375px) {
  html body > #mobileNav.mobile-menu.gic-premium-drawer-v4 .gic-v4-account:has(button.gic-v4-smart-badge:not(.has-level)) {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    column-gap: 9px !important;
    padding: 12px !important;
  }
  html body > #mobileNav.mobile-menu.gic-premium-drawer-v4 .gic-v4-account:has(button.gic-v4-smart-badge.has-level) {
    grid-template-columns: 40px minmax(0, 1fr) max-content !important;
    column-gap: 7px !important;
    padding: 10px !important;
  }
}