/* Badges, the monthly team goals and the helper's name (Oct 18, 2026).
   The rest of the portal sticks to the brand palette. Badges are the one place with extra color on purpose (CEO: "a bunch more color to look excited"),
   so each badge has its own bright hue, a ribbon in a partner color, a shine and a few sparkles. Earned medals are bright; ones not earned yet are quiet and locked.
   Hues: .m-teal .m-coral .m-gold .m-sky .m-plum .m-leaf .m-sun .m-berry .m-indigo. --m1 light, --m2 main, --m3 deep, --m4 rim, --mg/--mgd ribbon, --mr rgb of the main color, --mk glyph. */

.m-teal   { --m1: #7BE0D1; --m2: #1FA394; --m3: #0F7569; --m4: #0B5A51; --mg: #FF9A5C; --mgd: #E4763A; --mr: 31, 163, 148; --mk: #fff; }
.m-coral  { --m1: #FFA48F; --m2: #F0583F; --m3: #BF3722; --m4: #962A19; --mg: #29B7A6; --mgd: #1C9082; --mr: 240, 88, 63; --mk: #fff; }
.m-gold   { --m1: #FFE79A; --m2: #F7BB2E; --m3: #CB8A0A; --m4: #A56C03; --mg: #EE5D45; --mgd: #C7432E; --mr: 247, 187, 46; --mk: #5A3A00; }
.m-sky    { --m1: #9ADAFF; --m2: #3B9DF0; --m3: #1F6CBD; --m4: #17539A; --mg: #FFC531; --mgd: #E3A413; --mr: 59, 157, 240; --mk: #fff; }
.m-plum   { --m1: #DDB3FF; --m2: #9A5BE0; --m3: #6A33B3; --m4: #51268D; --mg: #FF86AE; --mgd: #E2628F; --mr: 154, 91, 224; --mk: #fff; }
.m-leaf   { --m1: #B4EE8A; --m2: #48B947; --m3: #2A8434; --m4: #1E6827; --mg: #FFC531; --mgd: #E3A413; --mr: 72, 185, 71; --mk: #fff; }
.m-sun    { --m1: #FFEE85; --m2: #FFC21F; --m3: #E69100; --m4: #BE7400; --mg: #F0583F; --mgd: #C7432E; --mr: 255, 194, 31; --mk: #5A3A00; }
.m-berry  { --m1: #FFA8C8; --m2: #E8467F; --m3: #B1215E; --m4: #8C174A; --mg: #FFC531; --mgd: #E3A413; --mr: 232, 70, 127; --mk: #fff; }
.m-indigo { --m1: #A9B4FF; --m2: #5C6CF0; --m3: #3843B5; --m4: #2A3490; --mg: #4FD3C0; --mgd: #2DAA98; --mr: 92, 108, 240; --mk: #fff; }

/* ---- the medal ---- */
.medal { --sz: 76px; position: relative; display: inline-block; width: var(--sz); height: calc(var(--sz) * 1.2); flex: none; font-size: calc(var(--sz) * .36); line-height: 1; vertical-align: middle; }
.medal.sm { --sz: 56px; }
.medal.lg { --sz: 96px; }
.medal.xl { --sz: 128px; }
.medal .disc { position: absolute; z-index: 2; left: 5%; top: 3%; width: 90%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; overflow: hidden; color: var(--mk);
  background: radial-gradient(circle at 30% 24%, var(--m1) 0%, var(--m2) 52%, var(--m3) 100%);
  box-shadow: 0 0 0 calc(var(--sz) * .045) var(--m4), 0 0 0 calc(var(--sz) * .06) rgba(255, 255, 255, .85), 0 calc(var(--sz) * .12) calc(var(--sz) * .2) calc(var(--sz) * -.06) rgba(var(--mr), .9); }
.medal .disc::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .7); pointer-events: none; }
.medal.m-gold .disc::before, .medal.m-sun .disc::before { border-color: rgba(255, 255, 255, .85); }
.medal .disc .i { position: relative; width: 1em; height: 1em; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.medal.m-gold .disc .i, .medal.m-sun .disc .i { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .55)); }
.medal .shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .55) 46%, transparent 60%); transform: translateX(-120%); }
.medal .rb { position: absolute; z-index: 1; top: calc(var(--sz) * .62); width: 27%; height: calc(var(--sz) * .56); background: linear-gradient(180deg, var(--mg), var(--mgd)); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
.medal .rb.rl { left: 17%; transform: rotate(9deg); }
.medal .rb.rr { right: 17%; transform: rotate(-9deg); }
.medal .sp { position: absolute; z-index: 3; width: 18%; aspect-ratio: 1; background: #FFD84A; clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%); filter: drop-shadow(0 0 1px rgba(150, 100, 0, .55)); }
.medal .sp.s1 { left: -7%; top: calc(var(--sz) * .06); }
.medal .sp.s2 { right: -9%; top: calc(var(--sz) * -.03); width: 22%; }
.medal .sp.s3 { right: -7%; top: calc(var(--sz) * .42); width: 13%; background: #fff; }
.medal.sm .sp.s3 { display: none; }

/* not earned yet: quiet, soft, locked */
.medal.locked { --m1: #F2EEE3; --m2: #E3DDCC; --m3: #D2CAB4; --m4: #C4BBA3; --mg: #DAD3BF; --mgd: #CBC3AD; --mr: 120, 110, 90; --mk: #8A9A97; }
.medal.locked .disc { box-shadow: 0 0 0 calc(var(--sz) * .04) var(--m4), 0 0 0 calc(var(--sz) * .055) rgba(255, 255, 255, .9); }
.medal.locked .disc::before { border-color: rgba(120, 110, 90, .35); }
.medal.locked .disc .i { opacity: .6; filter: none; }
.medal .lk { position: absolute; z-index: 4; right: -1%; top: calc(var(--sz) * .6); width: 31%; aspect-ratio: 1; border-radius: 50%; background: #566B68; color: #fff; display: grid; place-items: center; font-size: calc(var(--sz) * .15); box-shadow: 0 0 0 2px var(--surface); }
.medal .lk .i { width: 1em; height: 1em; }

/* the moment a badge is earned: the medal pops in and the shine sweeps across once */
.celebrate .medal.earned { animation: medal-pop .75s cubic-bezier(.2, 1.35, .4, 1) both; }
.celebrate .medal.earned .shine { animation: medal-shine 1.1s .45s ease-out both; }
.celebrate .medal.earned .sp { animation: sp-in .5s .5s ease-out both; }
.celebrate .medal.earned .sp.s2 { animation-delay: .65s; }
.celebrate .medal.earned .sp.s3 { animation-delay: .8s; }
@keyframes medal-pop { 0% { transform: scale(.3) rotate(-14deg); opacity: 0; } 70% { transform: scale(1.08) rotate(3deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes medal-shine { to { transform: translateX(120%); } }
@keyframes sp-in { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .celebrate .medal.earned, .celebrate .medal.earned .shine, .celebrate .medal.earned .sp { animation: none; } .medal .shine { display: none; } }
.cel-medal { display: grid; place-items: center; padding: .4rem 0 .2rem; }
.celebrate .cel-k, .bdview .cel-k { text-transform: none; }
.bdview .cel-medal { padding-bottom: .4rem; }
.bdview .bar { width: min(260px, 100%); }

/* ---- Badges tab ---- */
.bd-hero { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1.4rem 1.6rem; margin-bottom: 1rem; border-radius: var(--r-xl); color: #fff;
  background: radial-gradient(circle at 88% 20%, rgba(255, 216, 74, .35), transparent 42%), radial-gradient(circle at 70% 110%, rgba(255, 134, 174, .35), transparent 40%), linear-gradient(120deg, #0F3A36 0%, #14605A 55%, #1FA394 100%); box-shadow: var(--shadow); overflow: hidden; }
.bd-hero-t { min-width: 0; display: grid; gap: .3rem; }
.bd-hero h2 { font-family: var(--f-display); font-weight: 500; font-size: 1.7rem; color: #fff; line-height: 1.1; }
.bd-hero .bd-n { font-family: var(--f-ui); font-size: 1.05rem; color: #fff; }
.bd-hero .bd-n strong { font-size: 2.1rem; font-weight: 700; line-height: 1; margin-right: .25rem; color: #FFD84A; }
.bd-hero .bd-n span { opacity: .9; }
.bd-hero .small { color: rgba(255, 255, 255, .85); }
.bd-hero-m { display: flex; flex: none; padding: 0 .5rem .2rem 0; }
.bd-hero-m .medal { margin-left: -14px; }
.bd-hero-m .medal:first-child { margin-left: 0; }
.bd-hero-none { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, .16); font-size: 1.8rem; }
.bd-sec { margin-bottom: 1rem; }
.bd-empty { padding: .6rem 0; color: var(--ink-2); }
.bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: .8rem; }
.bdg button { display: grid; justify-items: center; align-content: start; gap: .3rem; width: 100%; height: 100%; padding: 1rem .6rem .9rem; text-align: center; border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(var(--mr), .16), rgba(var(--mr), .04) 70%, var(--surface)); box-shadow: inset 0 0 0 1.5px rgba(var(--mr), .4); transition: transform .15s ease, box-shadow .15s ease; }
.bdg button:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px rgba(var(--mr), .7), 0 12px 22px -16px rgba(var(--mr), 1); }
.bdg strong { font-family: var(--f-ui); font-weight: 700; font-size: .92rem; line-height: 1.25; color: var(--ink); }
.bdg small { color: var(--ink-3); font-size: .8rem; }
.bd-gh { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin: 1.1rem 0 .5rem; font-family: var(--f-ui); font-size: 1rem; font-weight: 700; color: var(--teal-deep); }
.bd-gh small { font-weight: 500; font-size: .84rem; color: var(--ink-3); }
.bd-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: .55rem; }
.bdl button { display: flex; align-items: center; gap: .85rem; width: 100%; padding: .65rem .85rem .65rem .7rem; border-radius: var(--r-lg); background: var(--faint); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s ease, background .15s ease; }
.bdl button:hover { background: var(--surface); box-shadow: inset 0 0 0 1.5px rgba(var(--mr), .55); }
.bdl .row-t small { color: var(--ink-2); }
.bdl .bar { margin-top: .3rem; max-width: 260px; height: 7px; }
.bdl .bar i { background: var(--m2); }
.bdl .bd-p { color: var(--ink-3); font-size: .78rem; }
.bdl .chev { color: var(--ink-3); flex: none; }
.bdl .medal { margin-bottom: -2px; }
.bd-soon .bdl button { opacity: .85; }
.bdview .bar i { background: var(--m2, var(--sage)); }

/* ---- This month ---- */
.mcard { display: grid; gap: .8rem; padding: 1.1rem 1.15rem; border-radius: var(--r-xl); background: linear-gradient(135deg, rgba(255, 216, 74, .16), rgba(154, 91, 224, .1) 55%, rgba(31, 163, 148, .1)), var(--surface); box-shadow: var(--shadow); border: 1.5px solid var(--gold-line); }
.mcard.won { border-color: #F7BB2E; background: linear-gradient(135deg, rgba(255, 216, 74, .32), rgba(255, 134, 174, .14)), var(--surface); }
.mc-top { display: flex; align-items: center; gap: .85rem; }
.mc-top .medal { margin-bottom: -4px; }
.mc-list { display: grid; gap: .4rem; }
.mc-list button { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 52px; padding: .45rem .7rem; border-radius: var(--r); background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px var(--line); }
.mc-list button:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.mc-dot { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--gold-wash); color: var(--gold-ink); box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.mc-list .done .mc-dot { background: #48B947; color: #fff; box-shadow: none; }
.mc-list .done strong { color: var(--ink-2); }
.mcard .small { font-size: .82rem; }
.mcard-s { margin-bottom: 1rem; }

/* ---- availability: still right ---- */
.av-confirm { display: grid; gap: .5rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.av-confirm p { display: flex; gap: .5rem; align-items: flex-start; }
.av-confirm p .i { margin-top: .25rem; color: var(--sage-ink); }

/* ---- your helper ---- */
.hp-card { display: grid; gap: .7rem; justify-items: start; }
.hp-card h2, .hp-hi h2 { font-family: var(--f-display); font-weight: 500; font-size: 1.6rem; color: var(--teal-deep); line-height: 1.15; }
.hp-card p { color: var(--ink-2); }
.hp-card .fld { width: 100%; }
.hp-card .err:empty { display: none; }
.hp-mark { position: relative; display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; color: #fff; background: radial-gradient(circle at 30% 24%, #7BE0D1, #1FA394 55%, #0F7569); box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 12px 22px -10px rgba(31, 163, 148, .9); }
.hp-mark svg { width: 38px; height: 38px; }
.hp-sp { position: absolute; width: 16px; height: 16px; background: #FFD84A; clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%); }
.hp-sp.s1 { left: -10px; top: 2px; } .hp-sp.s2 { right: -12px; top: -6px; width: 20px; height: 20px; } .hp-sp.s3 { right: -8px; bottom: 6px; width: 11px; height: 11px; background: #fff; }
.hp-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.hp-chip { min-height: 40px; padding: 0 1rem; border-radius: var(--pill); font-family: var(--f-ui); font-weight: 600; font-size: .9rem; color: var(--teal-deep); background: #fff; box-shadow: inset 0 0 0 1.5px var(--teal-line); }
.hp-chip:hover { background: var(--wash); box-shadow: inset 0 0 0 1.5px var(--primary); }
.hp-act { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.hp-page { max-width: 640px; margin-bottom: 1.6rem; }
.hp-hi { display: grid; gap: .7rem; justify-items: start; }
.hp-dialog { padding: .3rem .1rem; }
.hp-slim { margin: 0; color: var(--ink-3); font-size: .82rem; }

@media (max-width: 560px) {
  .bd-hero { flex-direction: column; align-items: flex-start; padding: 1.2rem 1.1rem; }
  .bd-hero-m { padding-left: 14px; }
  .bd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bd-list { grid-template-columns: minmax(0, 1fr); }
  .mc-top .medal { --sz: 52px; }
}

.bd-soon summary { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; }
.bd-soon summary::-webkit-details-marker { display: none; }
.bd-soon summary h2 { font-family: var(--f-display); font-weight: 500; font-size: 1.45rem; color: var(--teal-deep); display: flex; align-items: center; gap: .5rem; }
.bd-soon summary .chev { transition: transform .2s ease; }
.bd-soon[open] summary .chev { transform: rotate(180deg); }
.bd-soon .bd-list { margin-top: .8rem; }