/* Mobilize (../MOBILIZE.md): the standing on a profile (reputation tier, badges, guilds, ways to earn, what reputation opens),
   the marks on a gathering's card, the check-in and the vouch, the door from a tool, and the guild pages. Both sites.
   Every colour is a token of site.css (DESIGN.md: no colour is added); gold (--field) stays the one filled thing. Nothing is
   hidden and animated in. Tap targets are 40px or more; no text under 12px. */

/* ---- the standing on a profile */
.mz-stand{display:grid;gap:var(--s4);margin:var(--s4) 0;padding:var(--s4);border-radius:var(--r);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.mz-rep{display:grid;gap:var(--s2)}
.mz-tierline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:0}
.mz-tier{display:inline-flex;align-items:center;min-height:32px;padding:4px 14px;border-radius:999px;border:1px solid var(--field);color:var(--field);font:800 .82rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase}
.mz-tier-trusted,.mz-tier-respected,.mz-tier-pillar{background:var(--field);color:var(--on-field)}
.mz-repn{color:var(--ink);font:700 1rem/1.2 var(--body)}
.mz-bar{height:8px;border-radius:999px;background:var(--sunk);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.mz-bar i{display:block;height:100%;border-radius:inherit;background:var(--field)}
.mz-hint{margin:0;color:var(--dim);font-size:.9rem;line-height:1.45}
.mz-bwrap,.mz-gl{display:grid;gap:var(--s2)}
.mz-badges{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s2)}
.mz-badge{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:var(--s2);align-items:center;min-height:56px;padding:var(--s2);border-radius:var(--r);background:var(--sunk);box-shadow:inset 0 0 0 1px var(--line)}
.mz-badge b{color:var(--ink);font:700 .95rem/1.2 var(--body)}
.mz-bl{grid-column:2;color:var(--dim);font-size:.8rem;line-height:1.3}
.mz-only{grid-column:1/-1;color:var(--dim);font-size:.75rem;margin-top:4px}
.mz-medal{grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:2px solid var(--field);color:var(--field);font:800 1rem/1 var(--display);box-shadow:inset 0 0 0 3px var(--panel),inset 0 0 0 4px color-mix(in oklab,var(--field) 45%,transparent)}
.mz-b-meet .mz-medal,.mz-b-trust .mz-medal{background:var(--field);color:var(--on-field);box-shadow:inset 0 0 0 3px color-mix(in oklab,var(--on-field) 25%,transparent)}
.mz-glist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.mz-glist li{display:inline-flex;align-items:center;gap:var(--s1)}
.mz-glist a{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--s3);border-radius:999px;background:var(--sunk);color:var(--ink);text-decoration:none;box-shadow:inset 0 0 0 1px var(--line);font-weight:700}
.mz-role{color:var(--dim);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.mz-earn,.mz-perks{border-radius:var(--r);background:var(--sunk);box-shadow:inset 0 0 0 1px var(--line)}
.mz-sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px var(--s2);min-height:48px;padding:var(--s2) var(--s3);cursor:pointer;list-style-position:inside}
.mz-sum b{color:var(--ink);font:700 1rem/1.3 var(--body)}
.mz-sum span{color:var(--dim);font-size:.88rem}
.mz-tools,.mz-more,.mz-ladder{list-style:none;margin:0;padding:0 var(--s3) var(--s3)}
.mz-trow{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name next" "prog prog" "bar bar";gap:2px var(--s2);padding:var(--s2) 0;border-top:1px solid var(--line)}
.mz-tname{grid-area:name;display:inline-flex;align-items:center;min-height:40px;color:var(--ink);font-weight:700;text-decoration:none}
.mz-tname:hover,.mz-tname:focus-visible{color:var(--field)}
.mz-tprog{grid-area:prog;color:var(--dim);font-size:.85rem}
.mz-tnext{grid-area:next;align-self:center;color:var(--field);font:700 .85rem/1 var(--body)}
.mz-tbar{grid-area:bar;height:6px;border-radius:999px;background:var(--panel);overflow:hidden}
.mz-tbar i{display:block;height:100%;background:var(--field)}
.mz-trow.is-done .mz-tprog{color:var(--field)}
.mz-earn > .mz-hint{padding:0 var(--s3)}
.mz-more li a{display:inline-flex;align-items:center;min-height:40px;color:var(--field);font-weight:700}
.mz-ladder{display:grid;gap:var(--s2);counter-reset:none}
.mz-ladder li{padding:var(--s2) var(--s3);border-radius:var(--r);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);opacity:.72}
.mz-ladder li.is-on{opacity:1;box-shadow:inset 0 0 0 1px var(--field)}
.mz-lh{display:flex;justify-content:space-between;gap:var(--s2);margin:0}
.mz-lh b{color:var(--ink)}
.mz-lh span{color:var(--dim);font-size:.85rem}
.mz-lc{margin:4px 0 0;color:var(--body);font-size:.92rem;line-height:1.4}
.mz-ladder li.is-on .mz-lh b{color:var(--field)}

/* ---- marks on a gathering's card and page */
.mz-marks{display:flex;flex-wrap:wrap;gap:var(--s1);margin:var(--s1) 0 0}
.mz-tag{display:inline-flex;align-items:center;min-height:28px;padding:2px 10px;border-radius:999px;border:1px solid var(--line);color:var(--body);font:700 .78rem/1.1 var(--body);text-decoration:none}
a.mz-tag{min-height:40px}
.mz-tag-lvl{border-color:var(--field);color:var(--field)}
.mz-tag-guild{background:var(--sunk);color:var(--ink)}
.mz-tag-ok{border-color:var(--field);color:var(--field)}
a.mz-tag:hover,a.mz-tag:focus-visible{border-color:var(--field);color:var(--field)}
.mz-say{margin:var(--s3) 0;padding:var(--s3);border-radius:var(--r);background:var(--sunk);box-shadow:inset 0 0 0 1px var(--line);line-height:1.45}
.mz-say b{color:var(--field)}

/* ---- at the gathering: the code, the check-in, the vouch */
.mz-room{display:grid;gap:var(--s2);padding:var(--s4);border-radius:var(--r);background:var(--panel);box-shadow:inset 0 0 0 1px var(--field)}
.mz-code{margin:0;color:var(--field);font:800 clamp(2rem,9vw,3.4rem)/1 var(--display);letter-spacing:.12em;text-align:center}
.mz-code:empty{display:none}
.mz-coderow{display:flex;flex-wrap:wrap;gap:var(--s2)}
.mz-codein{flex:1 1 9ch;min-height:48px;padding:0 var(--s3);border-radius:var(--r);border:1px solid var(--line);background:var(--sunk);color:var(--ink);font:800 1.4rem/1 var(--display);letter-spacing:.2em;text-transform:uppercase}
.mz-vouch{display:grid;gap:var(--s2)}
.mz-people{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.mz-people li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);min-height:48px}
.mz-people li > a{display:inline-flex;align-items:center;min-height:40px;font-weight:700;color:var(--ink)}
.mz-vbtn{margin-inline-start:auto;min-height:40px}

/* ---- the door from a tool */
.mz-door{margin:var(--s5) 0 0;padding:var(--s4) 0;border-block:1px solid var(--line);background:var(--panel)}
.mz-door-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3)}
.mz-door-t{flex:1 1 280px;min-width:0}
.mz-kicker{margin:0 0 4px;color:var(--field);font:800 .78rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase}
.mz-door-h{margin:0;color:var(--ink);font:700 clamp(1.2rem,4vw,1.6rem)/1.2 var(--display)}
.mz-door-p{margin:var(--s1) 0 0;color:var(--body);line-height:1.45}
.mz-door-go{min-height:48px}

/* ---- the guild pages */
.mz-glistp{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.mz-gcard{display:grid;border-radius:var(--r);overflow:hidden;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;color:inherit}
.mz-gcard:hover,.mz-gcard:focus-visible{box-shadow:inset 0 0 0 1px var(--field)}
.mz-gcov{aspect-ratio:16/7;background:var(--sunk) center/cover no-repeat}
.mz-gbody{display:grid;gap:4px;padding:var(--s3)}
.mz-gname{margin:0;color:var(--ink);font:700 1.15rem/1.2 var(--display)}
.mz-gline{margin:0;color:var(--body);font-size:.92rem;line-height:1.4}
.mz-gmeta{margin:4px 0 0;color:var(--dim);font-size:.82rem}
.mz-ghead{display:grid;gap:var(--s2);margin:var(--s3) 0}
.mz-gbig{aspect-ratio:16/6;border-radius:var(--r);background:var(--sunk) center/cover no-repeat}
.mz-gnums{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s4)}
.mz-gnums b{display:block;color:var(--ink);font:800 1.5rem/1 var(--display)}
.mz-gnums span{color:var(--dim);font-size:.85rem}
.mz-gsec{display:grid;gap:var(--s2);margin:var(--s4) 0}
.mz-mlist{list-style:none;margin:0;padding:0;display:grid;gap:var(--s1)}
.mz-mlist li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);min-height:48px}
.mz-mlist li > a{display:inline-flex;align-items:center;min-height:40px;color:var(--ink);font-weight:700}
.mz-mlist .mz-acts{margin-inline-start:auto;display:flex;flex-wrap:wrap;gap:var(--s1)}
.mz-board{list-style:none;margin:0;padding:0;counter-reset:r}
.mz-board li{display:flex;justify-content:space-between;gap:var(--s2);min-height:40px;align-items:center;border-top:1px solid var(--line)}
.mz-board li b{color:var(--field)}
.mz-new{display:grid;gap:var(--s3);max-width:640px}
@media (min-width:900px){.mz-stand{grid-template-columns:1fr 1fr}.mz-stand > .mz-rep,.mz-stand > .mz-earn,.mz-stand > .mz-perks{grid-column:1/-1}}