/* Badges, stickers and the "My badges" page.  badge_html() in includes/badges.php prints:
   <span class="bdg bdg-SHAPE" style="--s:SIZE;--c1:FILL;--c2:RIM"><span class="bdg-in">symbol</span></span>
   Size comes from --s, colours from --c1 (fill) and --c2 (rim), so one badge looks right at 28px in a list or 160px on a certificate. */
.bdg{--s:64px;--c1:#fbbf24;--c2:#b45309;position:relative;display:inline-grid;place-items:center;flex:none;width:var(--s);height:var(--s);vertical-align:middle;
  filter:drop-shadow(0 calc(var(--s)*.035) 0 rgba(0,0,0,.28));transition:transform .15s}
.bdg::before,.bdg::after{content:"";position:absolute;background:var(--c2)}
.bdg::before{inset:0}
.bdg::after{inset:calc(var(--s)*.075);background:var(--c1);background-image:radial-gradient(120% 90% at 28% 12%,rgba(255,255,255,.6),rgba(255,255,255,0) 58%),linear-gradient(165deg,var(--c1),var(--c1));
  background-image:radial-gradient(120% 90% at 28% 12%,rgba(255,255,255,.6),rgba(255,255,255,0) 58%),linear-gradient(165deg,var(--c1),color-mix(in srgb,var(--c1) 70%,#000))}
.bdg-in{position:relative;z-index:1;display:grid;place-items:center;font-size:calc(var(--s)*.42);line-height:1;color:#fff;text-shadow:0 calc(var(--s)*.02) calc(var(--s)*.03) rgba(0,0,0,.4);font-style:normal;white-space:nowrap}
.bdg-in i{font-size:.92em}
.bdg-circle::before,.bdg-circle::after{border-radius:50%}
.bdg-square::before,.bdg-square::after{border-radius:24%}
.bdg-shield::before,.bdg-shield::after{clip-path:polygon(50% 0%,88% 9%,95% 14%,95% 50%,91% 68%,79% 84%,50% 100%,21% 84%,9% 68%,5% 50%,5% 14%,12% 9%)}
.bdg-shield .bdg-in{margin-top:-4%}
.bdg-star::before,.bdg-star::after{clip-path:polygon(50% 0%,62% 35%,98% 36%,69% 58%,80% 93%,50% 72%,20% 93%,31% 58%,2% 36%,38% 35%)}
.bdg-star::after{inset:calc(var(--s)*.07)}
.bdg-star .bdg-in{font-size:calc(var(--s)*.27);margin-top:8%}
.bdg-hex::before,.bdg-hex::after{clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0% 50%)}
.bdg-seal::before,.bdg-seal::after{clip-path:polygon(50.0% 3.0%,53.8% 1.6%,57.8% 0.6%,61.3% 2.8%,64.5% 5.3%,68.6% 5.2%,72.7% 5.4%,75.3% 8.6%,77.6% 12.0%,81.5% 13.1%,85.4% 14.6%,86.9% 18.5%,88.0% 22.4%,91.4% 24.7%,94.6% 27.3%,94.8% 31.4%,94.7% 35.5%,97.2% 38.7%,99.4% 42.2%,98.4% 46.2%,97.0% 50.0%,98.4% 53.8%,99.4% 57.8%,97.2% 61.3%,94.7% 64.5%,94.8% 68.6%,94.6% 72.7%,91.4% 75.3%,88.0% 77.6%,86.9% 81.5%,85.4% 85.4%,81.5% 86.9%,77.6% 88.0%,75.3% 91.4%,72.7% 94.6%,68.6% 94.8%,64.5% 94.7%,61.3% 97.2%,57.8% 99.4%,53.8% 98.4%,50.0% 97.0%,46.2% 98.4%,42.2% 99.4%,38.7% 97.2%,35.5% 94.7%,31.4% 94.8%,27.3% 94.6%,24.7% 91.4%,22.4% 88.0%,18.5% 86.9%,14.6% 85.4%,13.1% 81.5%,12.0% 77.6%,8.6% 75.3%,5.4% 72.7%,5.2% 68.6%,5.3% 64.5%,2.8% 61.3%,0.6% 57.8%,1.6% 53.8%,3.0% 50.0%,1.6% 46.2%,0.6% 42.2%,2.8% 38.7%,5.3% 35.5%,5.2% 31.4%,5.4% 27.3%,8.6% 24.7%,12.0% 22.4%,13.1% 18.5%,14.6% 14.6%,18.5% 13.1%,22.4% 12.0%,24.7% 8.6%,27.3% 5.4%,31.4% 5.2%,35.5% 5.3%,38.7% 2.8%,42.2% 0.6%,46.2% 1.6%)}
.bdg-seal::after{inset:calc(var(--s)*.09);border-radius:50%;clip-path:none}
.bdg-sticker{transform:rotate(-5deg);filter:drop-shadow(0 calc(var(--s)*.05) calc(var(--s)*.05) rgba(0,0,0,.35))}
.bdg-sticker::before{background:#fff;border-radius:46% 54% 52% 48%/50% 46% 54% 50%}
.bdg-sticker::after{inset:calc(var(--s)*.06);border-radius:46% 54% 52% 48%/50% 46% 54% 50%}
.bdg-sticker .bdg-in{font-size:calc(var(--s)*.5)}
.bdg.locked{filter:grayscale(1) opacity(.32)}
.bdg.locked .bdg-in{opacity:.55}
.bdg-n{position:absolute;z-index:2;right:-6%;bottom:-4%;min-width:calc(var(--s)*.32);height:calc(var(--s)*.32);padding:0 calc(var(--s)*.07);border-radius:99px;background:var(--hard);color:#fff;border:2px solid var(--panel,#fff);font:800 calc(var(--s)*.18)/calc(var(--s)*.3) Inter,sans-serif;text-align:center;font-style:normal;box-sizing:border-box}
a:hover>.bdg,button:hover>.bdg,.bdg-pick:hover .bdg{transform:translateY(-2px) rotate(-3deg)}
.bdg-sticker:hover{transform:rotate(2deg) scale(1.04)}
@media (prefers-reduced-motion:reduce){.bdg{transition:none}a:hover>.bdg,button:hover>.bdg{transform:none}}

/* a badge with its name under it */
.bdg-tile{display:inline-flex;flex-direction:column;align-items:center;gap:6px;text-align:center;max-width:110px;font-size:.78rem;line-height:1.2;color:var(--text)}
.bdg-tile b{font-weight:700}
.bdg-tile small{color:var(--muted);font-weight:600}
.bdg-tile.locked b,.bdg-tile.locked small{color:var(--muted)}
.bdg-row{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center}
.bdg-more{font-size:.75rem;font-weight:800;color:var(--muted);padding-left:4px}
.bdg-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:18px 10px;justify-items:center}
.bdg-goal{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:.78rem;max-width:120px}
.bdg-goal b{font-size:.8rem}
.bdg-bar{display:block;width:84px;height:7px;border-radius:99px;background:var(--line);overflow:hidden}
.bdg-bar>i{display:block;height:100%;background:var(--green);border-radius:99px}
.bdg-goal small{color:var(--muted);font-weight:600}

/* ---- My badges page ---- */
.bp-hero{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--panel);border:3px solid var(--hard);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:22px}
.bp-hero .uface{border-width:3px}
.bp-stats{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
.bp-stat{min-width:92px;text-align:center;background:var(--bg);border:2px solid var(--hard);border-radius:12px;padding:8px 12px}
.bp-stat b{display:block;font:800 1.5rem 'Baloo 2',sans-serif;line-height:1.1}
.bp-stat span{font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.bp-cat{margin:0 0 10px;font-size:.78rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.bp-block{background:var(--panel);border:3px solid var(--hard);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:18px;margin-bottom:20px}
.bp-recent{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.cert-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.cert-card{display:flex;gap:12px;align-items:center;background:var(--bg);border:2px solid var(--hard);border-radius:14px;padding:10px 12px;text-decoration:none;color:var(--text)}
.cert-card:hover{background:var(--panel2);color:var(--text)}
.cert-card .ct{width:64px;height:46px;flex:none;border-radius:6px;border:2px solid var(--hard);display:grid;place-items:center;font-size:1.3rem;background:#fffdf5;color:#c9971c}
.cert-card b{display:block;font-size:.92rem;line-height:1.2}
.cert-card small{color:var(--muted);font-weight:600}

/* ---- the badge designer (Admin > Badges, My badges > Make a badge) ---- */
.bd{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:20px;align-items:start}
.bd-prev{position:sticky;top:90px;display:flex;flex-direction:column;align-items:center;gap:12px;background:var(--bg);border:2px dashed var(--line);border-radius:16px;padding:18px 10px}
.bd-prev .bdg-tile{max-width:200px}
.bd-prev .bd-sizes{display:flex;align-items:flex-end;gap:10px}
.bd-opts{display:flex;flex-wrap:wrap;gap:8px}
.bd-shape{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;min-width:70px;background:var(--bg);border:2px solid var(--line);border-radius:12px;cursor:pointer;font:inherit;font-size:.72rem;font-weight:700;color:var(--soft)}
.bd-shape.on{border-color:var(--sky);box-shadow:0 0 0 2px var(--sky);color:var(--text)}
.bd-swatch{width:34px;height:34px;border-radius:50%;border:3px solid var(--hard);cursor:pointer;padding:0;position:relative}
.bd-swatch.on{box-shadow:0 0 0 3px var(--sky)}
.bd-sym{display:flex;flex-wrap:wrap;gap:4px;max-height:176px;overflow:auto;padding:6px;border:2px solid var(--line);border-radius:12px;background:var(--bg)}
.bd-sym button{width:38px;height:38px;border-radius:9px;border:2px solid transparent;background:transparent;cursor:pointer;font-size:1.25rem;display:grid;place-items:center;color:var(--text);padding:0}
.bd-sym button:hover{background:var(--panel2)}
.bd-sym button.on{border-color:var(--sky);background:var(--panel2)}
.bd-custom{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bd-custom input[type=color]{width:44px;height:36px;padding:2px;border:2px solid var(--hard);border-radius:8px;background:var(--bg)}
.bd-rule{background:var(--bg);border:2px solid var(--line);border-radius:12px;padding:12px}
@media (max-width:720px){.bd{grid-template-columns:1fr}.bd-prev{position:static;order:-1}}

/* ---- the badge picker (class Badges tab, activity rewards) ---- */
.bpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px 6px;max-height:48vh;overflow:auto;padding:4px}
.bdg-pick{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px;border-radius:12px;border:2px solid transparent;background:transparent;cursor:pointer;font:inherit;color:var(--text);text-align:center;font-size:.72rem;font-weight:700;line-height:1.15}
.bdg-pick:hover{background:var(--panel2)}
.bdg-pick.on{border-color:var(--sky);background:var(--panel2);box-shadow:0 0 0 2px var(--sky)}
.bdg-pick small{font-weight:600;color:var(--muted)}

/* ---- class Badges tab ---- */
.bgive-cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:start}
.bgive-list{max-height:300px;overflow:auto;border:2px solid var(--line);border-radius:12px;padding:6px 10px;background:var(--bg);display:flex;flex-direction:column}
.bgive-list .check-row{padding:5px 0}
.bgive-all{font-weight:700;margin-bottom:6px}
.bdet summary{cursor:pointer;list-style:none}
.bdet summary::-webkit-details-marker{display:none}
.bdet-list{list-style:none;margin:10px 0 2px;padding:0;display:flex;flex-direction:column;gap:6px}
.bdet-list li{display:flex;align-items:center;gap:10px}
.bdet-list li>span{flex:1;min-width:0}
.bdet-list li form{margin:0}
@media (max-width:760px){.bgive-cols{grid-template-columns:1fr}.bpick{max-height:40vh}}

/* ---- dashboard strip ---- */
.bp-strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between;background:var(--panel);border:3px solid var(--hard);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:10px 16px;margin:0 0 18px;text-decoration:none;color:var(--text)}
.bp-strip:hover{background:var(--panel2);color:var(--text)}
.bp-strip-t small{color:var(--muted);font-weight:600;margin-left:6px}