/* The medal coin, shared by My Membership's Challenges row and the Challenges
   hub (2026-10-19 design handovers v2). One element: a conic metal body, a
   knurled edge (::before), a domed face (::after), the embossed numeral
   (.coin-n, from the tier: gold 1, silver 2, bronze 3) and a soft-light glint
   (.coin-g). Both are styled by two classes, so a page's own `.x b` or `.x i`
   can't restyle them.
   templates/challenges/_coin.html renders it; each page sizes it with --s.
   .coin--sm is the compact form for 30px and under (body and face only),
   .coin--off a tier not earned yet, .coin--plain no numeral (a podium, where
   the number beside it is the place), .coin-empty no medal (a dashed ring). */

.coin {
  --s: 56px;
  --c1: #fff3c4;
  --c2: #f5c542;
  --c3: #b9830f;
  --c4: #7a520a;
  --gl: rgba(245, 197, 66, .45);
  --tx: #5a3d06;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--c3), var(--c1) 12%, var(--c2) 24%, var(--c4) 40%, var(--c2) 56%, var(--c1) 70%, var(--c3) 86%, var(--c3));
  box-shadow: 0 calc(var(--s) * .14) calc(var(--s) * .45) -6px var(--gl), 0 2px 4px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.coin--silver { --c1: #fff; --c2: #cdd5e2; --c3: #8a96ab; --c4: #5b6578; --gl: rgba(205, 213, 226, .32); --tx: #3b4352; }
.coin--bronze { --c1: #ffd9b8; --c2: #e0975a; --c3: #a35e2a; --c4: #6a3a16; --gl: rgba(224, 151, 90, .38); --tx: #4b260b; }

.coin::before {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(0, 0, 0, .22) 0 2deg, rgba(255, 255, 255, .12) 2deg 4deg);
  -webkit-mask: radial-gradient(circle, transparent 76%, #000 77%);
  mask: radial-gradient(circle, transparent 76%, #000 77%);
}
.coin::after {
  content: "";
  position: absolute;
  inset: 17%;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, var(--c1), var(--c2) 42%, var(--c3) 100%);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .55), inset 0 -3px 6px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .18);
}
.coin .coin-n {
  position: relative;
  z-index: 1;
  color: var(--tx);
  font-size: calc(var(--s) * .34);
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55), 0 -1px 0 rgba(0, 0, 0, .2);
}
.coin .coin-n::before { content: "1"; }
.coin--silver .coin-n::before { content: "2"; }
.coin--bronze .coin-n::before { content: "3"; }
.coin .coin-g {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
  background: linear-gradient(125deg, transparent 30%, rgba(255, 255, 255, .55) 42%, transparent 52%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.coin--sm { box-shadow: 0 2px 8px -2px var(--gl), inset 0 0 0 1px rgba(255, 255, 255, .3); }
.coin--sm::before, .coin--sm .coin-n, .coin--sm .coin-g { display: none; }
.coin--sm::after { inset: 14%; }

.coin--off { filter: grayscale(1) brightness(.55); opacity: .45; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.coin--plain .coin-n { display: none; }

.coin-empty {
  --s: 56px;
  display: inline-block;
  flex: none;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  border: 1.5px dashed rgba(160, 180, 220, .32);
  background: radial-gradient(circle, rgba(160, 180, 220, .05), transparent 70%);
}

/* Windows High Contrast drops the gradients: keep each coin's outline (an
   empty ring keeps its own dashed one, so the two still differ). */
@media (forced-colors: active) {
  .coin { border: 1px solid CanvasText; }
}