/* Profile pages (/profil/{id}). */
.profile-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:20px;align-items:start}
.profile-left,.profile-right{display:grid;gap:20px;min-width:0;align-content:start}
.profile-grid .card{margin:0}
.profile-identity{text-align:center;padding:26px 22px}
.profile-identity h2{margin:10px 0 4px;font-size:22px}
.profile-identity.is-admin{border-color:rgba(232,182,74,.7);box-shadow:0 0 0 1px rgba(232,182,74,.25),0 10px 34px rgba(232,182,74,.16)}
.profile-identity.is-admin h2{color:#d9a12c}
.profile-initials{display:grid;place-items:center;width:96px;height:96px;margin:0 auto 6px;border-radius:50%;background:linear-gradient(135deg,#2f8fbf,#1b5f88);color:#fff;font-size:32px;font-weight:800}
.profile-online{display:inline-flex;align-items:center;gap:7px;margin:0 0 10px;font-size:13px;opacity:.75}
.profile-online i{width:9px;height:9px;border-radius:50%;background:#8b98a5}
.profile-online.on i{background:#2fc27b;box-shadow:0 0 0 3px rgba(47,194,123,.25)}
.profile-identity .role-list{justify-content:center;margin-bottom:12px}
.profile-identity dl{margin:12px 0 0;text-align:left}
.profile-identity dl div{padding:9px 0;border-top:1px solid rgba(127,140,155,.25)}
.profile-identity dt{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.profile-identity dd{margin:2px 0 0;font-size:14px}
.profile-actions{margin-top:16px;display:flex;justify-content:center;gap:8px}
.profile-locked{text-align:center;padding:40px 24px}
.profile-lock-ico{font-size:34px}

/* the star / hexagon */
.profile-star{padding:22px 24px 16px}
.profile-star-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.profile-star-head h2{margin:2px 0 0}
.profile-thin{padding:3px 10px;border-radius:999px;background:rgba(227,160,42,.18);color:#c98a10;font-size:12px;font-weight:700}
.hx-wrap{display:grid;grid-template-columns:minmax(260px,420px) minmax(0,1fr);gap:20px;align-items:center}
.hx{width:100%;height:auto;overflow:visible}
.hx-ring{fill:none;stroke:rgba(127,140,155,.35);stroke-width:1}
.hx-ring:nth-of-type(1){fill:rgba(127,140,155,.06)}
.hx-axis{stroke:rgba(127,140,155,.3);stroke-width:1}
.hx-shape{fill:url(#hx-fill);stroke:url(#hx-line);stroke-width:2.5;stroke-linejoin:round;transform-box:view-box;transform-origin:210px 180px;animation:hx-grow 1.2s cubic-bezier(.2,1.15,.3,1) both}
.hx-dot{fill:#fff;stroke:url(#hx-line);stroke-width:2.5;animation:hx-dot .5s 1s ease-out both}
.hx.thin .hx-shape{opacity:.55;stroke-dasharray:6 5}
.hx-label{fill:currentColor;font-size:13px;font-weight:700}
.hx-num{fill:currentColor;font-size:12px;font-weight:600;opacity:.65}
@keyframes hx-grow{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes hx-dot{from{opacity:0}to{opacity:1}}
.hx-legend{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hx-legend li{display:grid;grid-template-columns:8px 1fr;gap:10px;align-items:stretch}
.hx-bar{display:block;width:8px;border-radius:99px;background:rgba(127,140,155,.28);position:relative;overflow:hidden}
.hx-bar i{position:absolute;left:0;right:0;bottom:0;border-radius:99px;background:linear-gradient(0deg,#2ec4b6,#f4be63);height:100%;transform-origin:bottom}
.hx-bar i{height:var(--h,100%)}
.hx-legend strong{display:inline-block;margin-right:8px;font-size:14px}
.hx-legend em{font-style:normal;font-size:13px;font-weight:700;color:#2f8fbf}
.hx-legend small{display:block;font-size:12px;opacity:.65;line-height:1.35}
.profile-note{margin:12px 0 0;font-size:12.5px}

.profile-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.profile-stats .metric{margin:0}
.profile-ach{padding:22px 24px}
.profile-ach h2{margin:2px 0 14px}
.profile-ach ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.profile-ach li{display:grid;gap:2px;justify-items:center;padding:14px 10px;border-radius:14px;text-align:center;border:1px solid rgba(127,140,155,.28);transition:transform .15s}
.profile-ach li span{font-size:28px}
.profile-ach li small{font-size:11.5px;opacity:.7;line-height:1.3}
.profile-ach li.earned{background:linear-gradient(160deg,rgba(244,190,99,.2),rgba(46,196,182,.12));border-color:rgba(232,182,74,.6)}
.profile-ach li.earned:hover{transform:translateY(-2px)}
.profile-ach li.locked{opacity:.5}
.profile-ach li.locked span{filter:grayscale(1)}
.profile-trend{padding:22px 24px}
.profile-trend h2{margin:2px 0 10px}
.profile-trend svg{width:100%;height:90px;overflow:visible}
.profile-trend-range{display:flex;justify-content:space-between;font-size:12px;opacity:.65}
.profile-insights{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:22px 24px}
.insight{display:flex;justify-content:space-between;gap:12px;margin:8px 0;padding:8px 12px;border-radius:10px;font-size:13.5px;border-left:3px solid #2fa36b;background:rgba(47,163,107,.09)}
.insight.down{border-left-color:#e3a02a;background:rgba(227,160,42,.1)}
.insight b{flex:none}
.profile-recent{padding:20px 24px}
.profile-recent a{display:grid;grid-template-columns:110px minmax(0,1fr) 40px 70px;gap:10px;align-items:center;padding:9px 6px;border-top:1px solid rgba(127,140,155,.22);color:inherit;text-decoration:none;font-size:13.5px}
.profile-recent a:hover{background:rgba(127,140,155,.1)}
.profile-recent b{text-align:right}
.profile-recent em{font-style:normal;font-size:12px;opacity:.75;text-align:right}
@media (max-width:1050px){.profile-grid{grid-template-columns:1fr}}
@media (max-width:640px){.hx-wrap{grid-template-columns:1fr}.profile-insights{grid-template-columns:1fr}.profile-recent a{grid-template-columns:80px minmax(0,1fr) 34px}.profile-recent em{display:none}}
@media (prefers-reduced-motion:reduce){.hx-shape,.hx-dot{animation:none}}

.profile-left .profile-recent{padding:18px 16px}
.profile-left .profile-recent a{grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px}
.profile-left .profile-recent a span:nth-child(2){grid-column:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-left .profile-recent em{grid-column:1 / -1;text-align:left}

/* achievements: more of them, with progress on the locked ones */
.ach-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ach-head h2{margin:2px 0 0}
.ach-filter{display:inline-flex;padding:3px;border-radius:12px;background:rgba(127,140,155,.2)}
.ach-filter button{border:0;background:transparent;color:inherit;padding:6px 12px;border-radius:9px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.ach-filter button.on{background:#2f8fbf;color:#fff}
.profile-ach ul{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.profile-ach li[hidden]{display:none}
.profile-ach li strong{font-size:14px}
.profile-ach li .ach-cat{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#c98a10;margin-top:4px}
.ach-bar{display:block;width:100%;height:5px;margin-top:8px;border-radius:99px;background:rgba(127,140,155,.3);overflow:hidden}
.ach-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2ec4b6,#f4be63)}
.ach-progress{font-style:normal;font-size:11px;opacity:.75;margin-top:3px;font-variant-numeric:tabular-nums}
.profile-ach li.locked{opacity:.78}
.profile-ach li.locked .ach-icon{filter:grayscale(1);opacity:.7}