/* oa-medals.css — earned-medal display in the nav header.
   Container sits between brand-link and oa-nav-x (crest/dropdown/status),
   floats slightly below the nav band so the pendant pokes into the body. */

.oa-nav-medals {
  display: none;
  align-items: center;
  gap: 6px;
  margin-left: 18px;
  z-index: 50;
}
.oa-nav-medals.on { display: flex; }

/* Mobile shrink (2026-05-24): founder iPhone view had hamburger pushed off
   the right edge because medals were taking ~50% of nav width. Halved medal
   height so brand + medals + dropdown + hamburger all fit inside iPhone width. */
@media (max-width: 768px) {
  .oa-nav-medals { gap: 3px; margin-left: 6px; }
  .oa-medal img { height: 22px; }
  .oa-medal:hover .oa-medal-pop { display: none; }  /* desktop-only popover */
}
@media (max-width: 480px) {
  .oa-nav-medals { gap: 2px; margin-left: 4px; }
  .oa-medal img { height: 18px; }
}

/* 2026-05-25 — Z-INDEX FIX (rev 2). z-index alone didn't fix the iOS Safari
   stacking-context quirk during sticky-hover (rev 1 still showed status pill
   overlapping medal image inside popover). Belt-and-suspenders now:
   (1) bump z-index from 200 to 1000 on .oa-medal hover/active/pop-open,
   (2) toggle body class oa-medal-pop-active from oa-medals.js — paired with
       the CSS rule below to HIDE .oa-status-w + .oa-status-pop while a
       medal popover is open. Status pill is decorative; popover is the
       active focus. Either mechanism alone should be enough — both running
       gives margin against another browser quirk. */
.oa-medal { position: relative; cursor: pointer; transition: transform .15s ease; }
.oa-medal:hover,
.oa-medal:active,
.oa-medal:focus-within { transform: scale(1.12); z-index: 1000; }
.oa-medal:has(.oa-pop-open) { z-index: 1000; }
/* Hide the status pill while a medal popover is open. Two parallel paths:
   (a) :has() — modern browsers (iOS 15.4+, evergreen desktop)
   (b) body.oa-medal-pop-active — set by oa-medals.js keepOpen handler.
   Either one fires the visibility:hidden. */
body:has(.oa-medal-pop.oa-pop-open) .oa-status-w,
body:has(.oa-medal-pop.oa-pop-open) .oa-status-pop,
body.oa-medal-pop-active .oa-status-w,
body.oa-medal-pop-active .oa-status-pop {
  visibility: hidden;
  pointer-events: none;
}
/* Medal art now ships transparent + tight-cropped (2026-05-24). Founder asked
   for medals as close as possible to top/bottom of nav band — height bumped
   to 68px (matches nav min-height exactly), overflowing the 4px inner padding
   so the medal art touches the navy band edges. align-items:center on the
   container keeps it visually balanced. Shadow tightened from 4px blur to
   2px to reduce visible halo clipping past the gold underline. */
.oa-medal img {
  height: 68px; width: auto; display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
}

/* Locked / not-yet-earned: greyed, dimmed. Hover restores some color so
   vets see what it'll look like once earned (carrot). */
.oa-medal-locked img {
  filter: grayscale(1) brightness(0.55) opacity(0.55);
  transition: filter .2s ease;
}
.oa-medal-locked:hover img {
  filter: grayscale(0.4) brightness(0.75) opacity(0.85);
}
.oa-medal-pop .oa-mp-locked {
  font-size: 9px; font-weight: 700; color: #888; letter-spacing: .4px;
}

/* hover popover — small tooltip, not a giant card. Founder ask 2026-05-23:
   "1/10th the size" — image dropped to nav-medal scale, padding/min-width
   tightened so the popover stops dominating the page body. */
.oa-medal-pop {
  display: none; position: absolute; top: 62px; left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid #d0c8b3; border-radius: 6px;
  padding: 6px 10px; box-shadow: 0 4px 14px rgba(0,0,0,.28);
  z-index: 220; text-align: center; min-width: 130px; color: #222;
}
.oa-medal:hover .oa-medal-pop { display: block; }
/* JS-managed hover-bridge state for popovers that contain a Share button —
   keeps the popover visible while cursor moves from medal to button. */
.oa-medal-pop.oa-pop-open { display: block; }
.oa-medal-pop img { width: 48px; height: auto; display: block; margin: 0 auto 4px; filter: none; }
.oa-medal-pop .oa-mp-name { font-size: 12px; font-weight: 700; color: var(--navy, #1d3461); margin-bottom: 2px; }
.oa-medal-pop .oa-mp-desc { font-size: 10.5px; color: #666; margin-bottom: 4px; line-height: 1.3; }
.oa-medal-pop .oa-mp-earned { font-size: 9px; font-weight: 700; color: #28a745; letter-spacing: .4px; }

/* Popovers that carry an action (Share to earn) get a bit more room
   and a clear button. Inline Share is the primary interaction surface
   for buddy-medal earning per founder ask 2026-05-23. */
.oa-medal-pop.with-action { min-width: 168px; padding: 8px 12px 10px; }
.oa-medal-pop .oa-mp-share {
  margin-top: 8px; width: 100%;
  background: #c89636; color: #1a1a1a; border: none; border-radius: 4px;
  padding: 7px 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .3px;
  cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.18);
  transition: background .12s ease, transform .12s ease;
}
.oa-medal-pop .oa-mp-share:hover { background: #d9a847; transform: translateY(-1px); }
.oa-medal-pop .oa-mp-share:active { transform: translateY(0); }

/* new-medal entrance animation (mid-session unlock) */
.oa-medal.oa-medal-new { animation: oa-medal-pop-in .45s ease; }
@keyframes oa-medal-pop-in {
  0%   { transform: scale(0.55); opacity: 0; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); }
}

/* earn-event toast */
.oa-earn-toast {
  position: fixed; top: 90px; right: 20px;
  background: #1a3a5c; color: #fff; padding: 14px 18px;
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.45);
  z-index: 9999; font-size: 13px; display: flex; align-items: center; gap: 14px;
  max-width: 340px; cursor: pointer;
  animation: oa-earn-slide-in .4s ease;
}
.oa-earn-toast img { height: 56px; width: auto; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.oa-earn-toast .oa-et-t { font-weight: 800; margin-bottom: 2px; }
.oa-earn-toast .oa-et-s { font-size: 11.5px; opacity: .85; }
@keyframes oa-earn-slide-in {
  from { transform: translateX(140%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}