/* Glass for the small buttons and labels that sit on top of photos.
   One look everywhere: soft see-through dark glass, a thin light border, white icon.
   Saved states and main actions keep their solid colours. */
:root { --em-glass-bg: rgba(12,6,9,0.36); --em-glass-bg-hover: rgba(12,6,9,0.55); --em-glass-line: rgba(255,255,255,0.24); --em-glass-blur: blur(12px) saturate(150%); }

/* 1. heart on event photos (member home row, Events page cards) */
:is(#em-g, .mh-ec-save).mh-ec-save:not(.is-on),
:is(#em-g, .ev2-save).ev2-save:not(.is-on),
/* 2. photo counter, Media wall type label and "Click to view" */
:is(#em-g, .fr-count).fr-count,
:is(#em-g, .media-tile-type).media-tile-type,
:is(#em-g, .img-hint).img-hint,
/* 6. hide on the member cards in Community */
:is(#em-g, .mc-x).mc-x,
/* 7. medal on award nominee photos */
:is(#em-g, .awards-rank).awards-rank,
/* 4. close in the event and talent windows, the photo viewer and the profile cover */
:is(#em-g, .tdx-close).tdx-close,
:is(#em-g, .mlb-close).mlb-close,
:is(#em-g, .pf-x).pf-x,
:is(#em-g, .pf-cover-btn).pf-cover-btn,
/* "Available" on talent photos, photo counter and arrows on Community posts with several photos */
:is(#em-g, .talent-avail-badge).talent-avail-badge,
:is(#em-g, .cpx-gal-count).cpx-gal-count,
:is(#em-g, .cpx-gal-nav).cpx-gal-nav {
  background: var(--em-glass-bg) !important;
  border: 1px solid var(--em-glass-line) !important;
  -webkit-backdrop-filter: var(--em-glass-blur); backdrop-filter: var(--em-glass-blur);
  box-shadow: 0 4px 16px rgba(0,0,0,0.22) !important;
}
:is(#em-g, .mh-ec-save).mh-ec-save:not(.is-on):hover,
:is(#em-g, .ev2-save).ev2-save:not(.is-on):hover,
:is(#em-g, .mc-x).mc-x:hover, :is(#em-g, .mlb-close).mlb-close:hover, :is(#em-g, .pf-x).pf-x:hover, :is(#em-g, .pf-cover-btn).pf-cover-btn:hover, :is(#em-g, .cpx-gal-nav).cpx-gal-nav:hover { background: var(--em-glass-bg-hover) !important; border-color: rgba(255,255,255,0.4) !important; }
:is(#em-g, .tdx-close).tdx-close:hover { background: rgba(200,16,46,0.5) !important; border-color: rgba(255,110,130,0.75) !important; }

/* 3. arrows on the member home row: glass, but strong enough to be seen on any photo */
:is(#em-g, .mh-rail-nav).mh-rail-nav {
  background: rgba(12,6,9,0.42) !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  -webkit-backdrop-filter: var(--em-glass-blur); backdrop-filter: var(--em-glass-blur);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4) !important;
}
:is(#em-g, .mh-rail-nav).mh-rail-nav:hover { background: rgba(12,6,9,0.62) !important; border-color: rgba(255,255,255,0.6) !important; }

/* browsers without blur: a little more solid so text stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --em-glass-bg: rgba(12,6,9,0.62); }
  :is(#em-g, .mh-rail-nav).mh-rail-nav { background: rgba(12,6,9,0.7) !important; }
}

/* ── header menu: a thin red underline under the active item, and a "New" tag on Voting ── */
.header-nav a { position: relative; }
:is(#em-g, .header-nav) a.active, :is(#em-g, .header-nav) a.active:hover { color: #fff; background: none; }
.header-nav a.active::before { content: ''; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 1px; height: 2px; border-radius: 2px; background: var(--red-bright, #FF3A5C); }
.header-nav a[data-label]::after { content: attr(data-label); display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; vertical-align: 1px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: .02em; line-height: 1.5; color: #7CF0B4;
  background: rgba(31,163,91,0.2); border: 1px solid rgba(47,208,122,0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
[data-theme="light"] :is(#em-g, .header-nav) a.active { color: #18090C; }
[data-theme="light"] .header-nav a[data-label]::after { color: #127a43; background: rgba(31,163,91,0.12); border-color: rgba(31,163,91,0.45); }
@media (max-width: 1100px) { .header-nav a.active::before { left: 0.6rem; right: 0.6rem; } }

/* ══ Glass, refined: one recipe for every see-through surface ══
   A tinted base, a soft light sheen from the top, a hairline edge and an inner top highlight,
   with a strong blur and extra colour so what passes behind stays a soft glow, never noise.
   Text on glass keeps full contrast; phones that cannot blur get a more solid version. */
:root {
  --g-blur: blur(22px) saturate(185%);
  --g-tint: rgba(16, 10, 13, 0.62);
  --g-sheen: linear-gradient(180deg, rgba(255,255,255,0.075) 0%, rgba(255,255,255,0.015) 55%, rgba(255,255,255,0) 100%);
  --g-edge: rgba(255, 255, 255, 0.09);
  --g-hi: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  /* small controls on photos */
  --em-glass-bg: rgba(14, 8, 11, 0.34);
  --em-glass-bg-hover: rgba(14, 8, 11, 0.52);
  --em-glass-line: rgba(255, 255, 255, 0.22);
  --em-glass-blur: blur(14px) saturate(170%);
}
[data-theme="light"] {
  --g-tint: rgba(255, 255, 255, 0.72);
  --g-sheen: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.15) 60%, rgba(255,255,255,0) 100%);
  --g-edge: rgba(24, 9, 12, 0.08);
  --g-hi: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* the top bar */
:is(#em-g, .site-header).site-header {
  background: var(--g-sheen), var(--g-tint) !important;
  -webkit-backdrop-filter: var(--g-blur) !important; backdrop-filter: var(--g-blur) !important;
  border-bottom: 1px solid var(--g-edge) !important;
  box-shadow: var(--g-hi), 0 10px 30px -18px rgba(0, 0, 0, 0.55) !important;
}
/* the bar at the bottom on phones */
:is(#em-g, .bottom-nav).bottom-nav {
  background: var(--g-sheen), var(--g-tint) !important;
  -webkit-backdrop-filter: var(--g-blur) !important; backdrop-filter: var(--g-blur) !important;
  border-top: 1px solid var(--g-edge) !important;
  box-shadow: var(--g-hi), 0 -12px 32px -16px rgba(0, 0, 0, 0.6) !important;
}
/* short messages */
:is(#em-g, #toast)#toast {
  background: var(--g-sheen), rgba(22, 14, 18, 0.74) !important;
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: var(--g-hi), 0 14px 40px rgba(0, 0, 0, 0.45) !important;
}
/* light theme keeps a dark toast, as before: it stands out on the white page */
[data-theme="light"] :is(#em-g, #toast)#toast { background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0)), rgba(24, 9, 12, 0.86) !important; border-color: rgba(255, 255, 255, 0.1) !important; }

/* controls on photos: the same tint plus a light sheen and an inner highlight, so they read as glass beads */
:is(#em-g, .mh-ec-save).mh-ec-save:not(.is-on), :is(#em-g, .ev2-save).ev2-save:not(.is-on),
:is(#em-g, .fr-count).fr-count, :is(#em-g, .media-tile-type).media-tile-type, :is(#em-g, .img-hint).img-hint,
:is(#em-g, .mc-x).mc-x, :is(#em-g, .awards-rank).awards-rank, :is(#em-g, .tdx-close).tdx-close,
:is(#em-g, .mlb-close).mlb-close, :is(#em-g, .pf-x).pf-x, :is(#em-g, .pf-cover-btn).pf-cover-btn,
:is(#em-g, .talent-avail-badge).talent-avail-badge, :is(#em-g, .cpx-gal-count).cpx-gal-count, :is(#em-g, .cpx-gal-nav).cpx-gal-nav,
:is(#em-g, .mh-rail-nav).mh-rail-nav {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.03) 60%, rgba(255,255,255,0) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 6px 18px rgba(0,0,0,0.28) !important;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
:is(#em-g, .ev2-save).ev2-save:not(.is-on):active, :is(#em-g, .mh-ec-save).mh-ec-save:not(.is-on):active,
:is(#em-g, .cpx-gal-nav).cpx-gal-nav:active, :is(#em-g, .mh-rail-nav).mh-rail-nav:active { transform: scale(0.94); }

/* no blur available, or the person asked for less see-through: solid, same colours */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --g-tint: rgba(16, 10, 13, 0.96); }
  [data-theme="light"] { --g-tint: rgba(255, 255, 255, 0.97); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --g-tint: rgba(16, 10, 13, 0.97); --em-glass-bg: rgba(14, 8, 11, 0.78); }
  [data-theme="light"] { --g-tint: rgba(255, 255, 255, 0.98); }
}
/* bars over scrolling text need a denser tint than controls over photos, so words behind never show through */
:root { --g-tint-bar: rgba(16, 10, 13, 0.84); }
[data-theme="light"] { --g-tint-bar: rgba(255, 255, 255, 0.9); }
:is(#em-g, .site-header).site-header, :is(#em-g, .bottom-nav).bottom-nav { background: var(--g-sheen), var(--g-tint-bar) !important; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --g-tint-bar: rgba(16, 10, 13, 0.97); } [data-theme="light"] { --g-tint-bar: rgba(255, 255, 255, 0.98); } }
@media (prefers-reduced-transparency: reduce) { :root { --g-tint-bar: rgba(16, 10, 13, 0.98); } [data-theme="light"] { --g-tint-bar: rgba(255, 255, 255, 0.99); } }
/* the phone bar sits over the busiest content: the densest of the glass */
:root { --g-tint-bnav: rgba(16, 10, 13, 0.9); } [data-theme="light"] { --g-tint-bnav: rgba(255, 255, 255, 0.93); }
:is(#em-g, .bottom-nav).bottom-nav { background: var(--g-sheen), var(--g-tint-bnav) !important; }