/* The members engine (build/members.js, build/members.py): the front call to action, the gatherings board, profiles. ONE file for
   both sites. It uses only the tokens both sites' site.css define (--field, --on-field, --bg, --panel, --sunk, --raise,
   --ink, --dim, --line, --r, --s1 to --s7, --display, --body) and their .btn, .sheet and .av, so each site keeps its own
   look. Phone first: every control is at least 44px tall, nothing is wider than the screen, nothing is hidden and animated in. */

/* ---- the front page's ONE call to action (15 October 2026, Armin: "at the top we should just have one call to action, which
   is 'Join the Fight'"). One gold button, on screen from the first paint: the whole width of its column on a phone, its own
   width from 560px, lined up with the line above it. The how-will-you-fight question is the first step of the panel after
   sign-up (.mb-res below). */
.fq{display:grid;gap:var(--s4);margin-top:var(--s5)}
.fq-lead{margin:0;font:700 clamp(1.05rem,3.6vw,1.3rem)/1.35 var(--body);color:var(--ink);max-width:34rem}
/* signed in (19 October 2026): the mark that says the reader already enlisted, by name, above the button to the next act */
.fq-in{display:inline-flex;align-items:center;gap:10px;justify-self:start;margin:0;padding:8px 16px 8px 10px;border:1px solid var(--field);border-radius:999px;background:rgba(0,0,0,.45);color:var(--ink);font:700 1rem/1.25 var(--body);max-width:100%;overflow-wrap:anywhere}
.fq-in[hidden]{display:none}
.fq-in svg{flex:none;width:24px;height:24px;padding:3px;border-radius:50%;background:var(--field);color:var(--on-field)}
/* the Enlist act's card once the reader has an account */
.act-li.is-enlisted .act-x{color:var(--field)}
/* signed in (19 October 2026): the mark that says the reader already enlisted, by name, above the button to the next act */
.fq-in{display:inline-flex;align-items:center;gap:10px;justify-self:start;margin:0;padding:8px 16px 8px 10px;border:1px solid var(--field);border-radius:999px;background:rgba(0,0,0,.45);color:var(--ink);font:700 1rem/1.25 var(--body);max-width:100%;overflow-wrap:anywhere}
.fq-in[hidden]{display:none}
.fq-in svg{flex:none;width:24px;height:24px;padding:3px;border-radius:50%;background:var(--field);color:var(--on-field)}
/* the Enlist act's card once the reader has an account */
.act-li.is-enlisted .act-x{color:var(--field)}
.fq .fq-go{justify-self:stretch;min-height:56px;padding:0 32px;font-size:1.125rem;letter-spacing:.01em;box-shadow:0 8px 28px rgba(0,0,0,.38)}
@media(min-width:560px){.fq .fq-go{justify-self:start;min-width:17rem}}
.mb-form input[type=text],.mb-form input[type=url],.mb-form input[type=number],.mb-form input[type=datetime-local],.mb-form select,.mb-form textarea,.mb-sheet select,.mb-filter select{display:block;width:100%;min-height:48px;padding:10px 14px;font:500 1rem/1.4 var(--body);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:var(--r);caret-color:var(--field)}
.mb-form textarea{min-height:96px;resize:vertical}
.mb-form :is(input,select,textarea):focus-visible{border-color:var(--field)}

/* ---- pages and the board */
.mb-page{padding-top:var(--s6)}
.mb-wrap{display:grid;gap:var(--s4)}
.mb-lede{color:var(--dim);font-size:1.1rem;max-width:40rem}
.mb-promise{max-width:40rem}
.mb-go{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.mb-body{display:grid;gap:var(--s4);min-width:0}
.mb-body[aria-busy="true"]:empty{min-height:120px}
.mb-ns{color:var(--dim)}
.mb-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
@media(min-width:760px){.mb-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mb-card{display:grid;gap:var(--s2);padding:var(--s4);background:var(--panel);border-radius:var(--r2,10px);min-width:0}
.mb-card h3{font-size:1.35rem;overflow-wrap:anywhere}
.mb-card h3 a{text-decoration:none}
/* the whole card opens the gathering: the title's link covers it, and the card's other links and buttons sit above that */
.mb-card{position:relative}
.mb-card .mb-open::after{content:"";position:absolute;inset:0;border-radius:inherit}
.mb-card a:not(.mb-open),.mb-card button{position:relative;z-index:1}
.mb-card:has(.mb-open):hover{background:var(--raise)}
.mb-card:has(.mb-open):hover h3 a{text-decoration:underline;text-underline-offset:4px}
.mb-about{color:var(--ink);font-size:.98rem}
.mb-acts{display:flex;flex-wrap:wrap;gap:var(--s2)}
.mb-acts .btn{flex:1 1 9rem;justify-content:center}
.mb-kind{color:var(--field);font:800 .8rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase}
.mb-when{font-weight:700}
.mb-where,.mb-seats,.mb-host{color:var(--dim);overflow-wrap:anywhere}
.mb-host a{color:var(--ink)}
.mb-row{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.mb-filter{display:grid;gap:6px;max-width:24rem}
.mb-filter label{font-weight:700}
.mb-empty{color:var(--dim)}
.mb-safe{display:grid;gap:6px;padding:var(--s3) var(--s4);border-left:3px solid var(--field);background:var(--sunk);font-size:.95rem}
.mb-safe a{font-weight:700}
.mb-say{min-height:1.4em;color:var(--dim);font-weight:600}
.mb-say.bad{color:var(--gf,#FF5A48)}
.mb-place{padding:var(--s3) var(--s4);background:var(--sunk);border:1px solid var(--field);border-radius:var(--r);white-space:pre-wrap;overflow-wrap:anywhere}
.mb-h2{font-size:clamp(1.3rem,4.6vw,1.8rem)}
.mb-guests{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.mb-guests li{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;justify-content:space-between;padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.mb-btn-s{min-height:44px;padding:8px 14px}
.mb-text{min-height:44px;padding:8px 0;background:none;border:0;color:var(--dim);font:600 .95rem/1.2 var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mb-text:hover{color:var(--ink)}
.mb-text.armed{color:var(--gf,#FF5A48)}

/* ---- forms */
.mb-form{display:grid;gap:var(--s4);max-width:36rem}
.mb-f{display:grid;gap:6px;min-width:0}
.mb-f > label,.mb-f > .mb-l{font-weight:700}
.mb-hint{color:var(--dim);font-size:.92rem}
.mb-chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.mb-chip{min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);font:600 .98rem/1.2 var(--body);cursor:pointer}
.mb-chip[aria-pressed="true"]{background:var(--field);border-color:var(--field);color:var(--on-field)}
.mb-tick{display:flex;align-items:flex-start;gap:12px;min-height:44px;font-weight:600;cursor:pointer}
.mb-tick input{width:22px;height:22px;flex:none;margin:2px 0 0;accent-color:var(--field)}
.mb-count{color:var(--dim);font-size:.85rem;justify-self:end}

/* ---- the profile (rebuilt 15 October 2026, Armin: "Significantly improve that: the look of it, the user interface, the ease of
   use, and the intuitiveness"). One card on top (.mb-hero: picture, name, rank, line, progress), three numbers, the owner's
   short list of what is left (.mb-todo), then what they did. The editor (.mb-edit) takes the card's place, with Save and Cancel
   held at the foot of the screen (.mb-ed-bar). Phone first: the card stacks under 560px, side by side from there. */
.mb-prof{display:grid;gap:var(--s4)}
.mb-hero{position:relative;display:grid;gap:var(--s4);justify-items:center;text-align:center;padding:var(--s5) var(--s4) var(--s4);background:radial-gradient(120% 90% at 50% 0%,color-mix(in oklab,var(--field) 16%,var(--panel)) 0%,var(--panel) 62%);border:1px solid color-mix(in oklab,var(--field) 26%,var(--line));border-radius:var(--r2,10px);overflow:hidden;min-width:0}
.mb-hero[hidden]{display:none}
@media(min-width:560px){.mb-hero{grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:start;align-items:center;padding:var(--s5)}.mb-hero > .mb-prog,.mb-hero > .mb-rankmeaning{grid-column:1/-1}}
.mb-hero-pic{flex:none}
.mb-pic{flex:none;width:128px;height:128px;border-radius:50%;overflow:hidden;background:var(--raise);display:grid;place-items:center;box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--field),0 10px 30px rgba(0,0,0,.45)}
.mb-pic img{width:100%;height:100%;object-fit:cover;display:block}
.mb-pic .av{width:100%;height:100%;font-size:3rem;box-shadow:none}
.mb-pic-btn{position:relative;display:block;padding:0;border:0;background:none;border-radius:50%;cursor:pointer}
.mb-pic-pen{position:absolute;right:2px;bottom:2px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--field);color:var(--on-field);box-shadow:0 0 0 3px var(--bg)}
.mb-pic-btn:hover .mb-pic,.mb-pic-btn:focus-visible .mb-pic{filter:brightness(1.08)}
.mb-hero-who{display:grid;gap:var(--s2);justify-items:inherit;min-width:0;max-width:100%}
h1.mb-name{margin:0;font-size:clamp(2rem,8vw,3rem);line-height:1;overflow-wrap:anywhere}
.mb-rankline{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:inherit;margin:0}
.mb-hero{justify-content:center}
.mb-rankname{display:inline-flex;align-items:center;min-height:28px;padding:2px 12px;border-radius:999px;background:var(--field);color:var(--on-field);font:800 .82rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase}
.mb-xp{color:var(--dim);font-weight:700;font-variant-numeric:tabular-nums}
.mb-bio{margin:0;font-size:1.12rem;line-height:1.45;overflow-wrap:anywhere;max-width:36rem}
.mb-editbtn{display:inline-flex;gap:8px;align-items:center;min-height:44px}
.mb-editbtn svg{order:-1}
.mb-prog{display:grid;gap:6px;width:100%}
.mb-bar{height:10px;border-radius:999px;background:var(--sunk);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.mb-bar i{display:block;height:100%;border-radius:inherit;background:var(--field)}
.mb-rankmeaning{margin:0;width:100%}
.mb-nums{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.mb-nums li{display:grid;gap:2px;justify-items:center;align-content:start;text-align:center;padding:var(--s3) var(--s2);background:var(--panel);border-radius:var(--r2,10px);min-width:0}
.mb-nums b{font:800 clamp(1.5rem,6vw,2rem)/1 var(--display);color:var(--field);font-variant-numeric:tabular-nums}
.mb-nums span{color:var(--dim);font-size:.85rem;line-height:1.25;overflow-wrap:anywhere}
.mb-todo{display:grid;gap:var(--s2);padding:var(--s4);background:var(--sunk);border:1px solid var(--line);border-inline-start:3px solid var(--field);border-radius:var(--r2,10px)}
.mb-todo[hidden]{display:none}
.mb-h3{margin:0;font-size:1.35rem}
.mb-steps{list-style:none;margin:var(--s1) 0 0;padding:0;display:grid;gap:var(--s2)}
.mb-steps li{display:flex;align-items:center;gap:var(--s3);min-height:48px}
.mb-stepdot{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--line);color:var(--on-field)}
.mb-steps li.is-done .mb-stepdot{background:var(--field);border-color:var(--field)}
.mb-steps li.is-done .mb-steptext{color:var(--dim);text-decoration:line-through}
.mb-steptext{flex:1;font-weight:700;min-width:0}
.mb-badges{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.mb-badges li{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border-radius:999px;background:var(--panel);border:1px solid color-mix(in oklab,var(--field) 30%,var(--line));font-weight:600;overflow-wrap:anywhere}
.mb-badges svg{color:var(--field);flex:none}
.mb-posts{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.mb-post{display:grid;gap:4px;padding:var(--s3) var(--s4);background:var(--panel);border-radius:var(--r2,10px);min-width:0}
.mb-post-h{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin:0}
.mb-post-h a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;overflow-wrap:anywhere}
.mb-post-t{margin:0;color:var(--ink);opacity:.9;overflow-wrap:anywhere}
.mb-stats{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.mb-stats li{overflow-wrap:anywhere}
/* the editor */
.mb-edit.mb-form{max-width:none;padding:var(--s4);background:var(--panel);border:1px solid color-mix(in oklab,var(--field) 26%,var(--line));border-radius:var(--r2,10px);gap:var(--s5)}
.mb-ed-top{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center}
.mb-ed-name{display:grid;gap:2px;min-width:0}
.mb-name-s{margin:0;font:800 clamp(1.5rem,6vw,2.1rem)/1.05 var(--display);overflow-wrap:anywhere}
.mb-ed-pic{margin:0;padding:0;border:0;display:grid;gap:var(--s3);min-width:0}
.mb-ed-pic legend{padding:0;margin-bottom:var(--s3);font-weight:800;font-size:1.1rem}
.mb-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:var(--sunk);border-radius:999px;max-width:26rem}
.mb-tab{min-height:44px;border:0;border-radius:999px;background:none;color:var(--dim);font:700 .98rem/1.2 var(--body);cursor:pointer}
.mb-tab[aria-selected="true"]{background:var(--field);color:var(--on-field)}
.mb-tabpane{display:grid;gap:var(--s2);min-width:0}
.mb-tabpane[hidden]{display:none}
.mb-group{margin:var(--s2) 0 0;color:var(--dim);font:800 .78rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase}
.mb-avs{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:var(--s3)}
.mb-av{position:relative;min-height:64px;padding:0;border:3px solid transparent;border-radius:50%;background:var(--raise);cursor:pointer;aspect-ratio:1;transition:transform .12s,border-color .12s}
.mb-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.mb-av:hover{transform:scale(1.05)}
.mb-av[aria-pressed="true"]{border-color:var(--field);box-shadow:0 0 0 3px color-mix(in oklab,var(--field) 30%,transparent)}
.mb-av[aria-pressed="true"]::after{content:"\2713";position:absolute;right:-4px;top:-4px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--field);color:var(--on-field);font:900 .85rem/1 var(--body);box-shadow:0 0 0 2px var(--panel)}
.mb-given{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);padding:2px 6px;border-radius:999px;background:var(--bg);color:var(--field);border:1px solid var(--field);font:700 .75rem/1.2 var(--body);white-space:nowrap}
.mb-drop{position:relative;display:grid;gap:6px;justify-items:center;text-align:center;padding:var(--s5) var(--s4);border:2px dashed color-mix(in oklab,var(--field) 45%,var(--line));border-radius:var(--r2,10px);background:var(--sunk);color:var(--field);cursor:pointer}
.mb-drop:hover,.mb-drop:focus-within{border-color:var(--field);background:var(--bg)}
.mb-drop b{color:var(--ink);font-size:1.1rem}
.mb-file{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
/* the chooser for which part of a photo is the picture (members.js cropper, 16 October 2026) */
.mb-drop[hidden]{display:none}
.mb-crop-box{display:grid;gap:var(--s3);justify-items:center}
.mb-crop-box[hidden]{display:none}
.mb-crop{display:grid;gap:var(--s2);justify-items:center;width:100%}
.mb-crop-stage{position:relative;width:min(100%,320px);aspect-ratio:1;overflow:hidden;border-radius:var(--r2,10px);background:#000;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;outline-offset:3px}
.mb-crop-stage.on{cursor:grabbing}
.mb-crop-stage:focus-visible{outline:3px solid var(--field)}
.mb-crop-stage img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;pointer-events:none;display:block}
.mb-crop-ring{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 999px rgba(0,0,0,.55);outline:2px solid rgba(255,255,255,.85);outline-offset:-2px;pointer-events:none}
.mb-crop-how{margin:0;text-align:center}
.mb-crop-zl{display:flex;align-items:center;gap:var(--s2);width:min(100%,320px);min-height:44px;color:var(--dim);font:800 1.2rem/1 var(--body)}
.mb-crop-zoom{flex:1;min-width:0;min-height:44px;accent-color:var(--field)}
.mb-crop-acts{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:center}
.mb-crop-acts .btn{min-height:44px}
.mb-count{color:var(--dim);font-size:.85rem;justify-self:end;font-variant-numeric:tabular-nums}
.mb-count.near{color:var(--field)}
.mb-ed-bar{position:sticky;bottom:0;z-index:2;display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin:0 calc(-1 * var(--s4)) calc(-1 * var(--s4));padding:var(--s3) var(--s4);background:var(--panel);border-top:1px solid var(--line);border-radius:0 0 var(--r2,10px) var(--r2,10px)}
.mb-ed-bar .btn{min-width:7.5rem;justify-content:center}
.mb-ed-bar .mb-say{flex:1 1 100%;margin:0;min-height:0}
.mb-ed-bar .mb-say:empty{display:none}
.mb-stars{display:flex;gap:var(--s1);flex-wrap:wrap}
.mb-star{min-width:48px;min-height:48px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--ink);font:800 1.1rem/1 var(--body);cursor:pointer}
.mb-star[aria-pressed="true"]{background:var(--field);border-color:var(--field);color:var(--on-field)}
.mb-sheet .sheet-body{display:grid;gap:var(--s4)}
.mb-sheet .mb-chips{flex-direction:column}
.mb-sheet .mb-chip{text-align:start;border-radius:var(--r)}
/* after a tap on how-will-you-fight: what it gets them, the way there, and the way on to the next question */
.mb-res:not([hidden]){display:grid;gap:var(--s3);padding:var(--s4);background:var(--sunk);border-inline-start:3px solid var(--field);border-radius:var(--r)}
.mb-res-l{margin:0;color:var(--ink);font-weight:600;line-height:1.45}
.mb-res-go{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.mb-acct{display:flex;align-items:center;justify-content:center;width:100%}
/* every link that stands on its own is a tap target of 44px, like the buttons */
.mb-host a,.mb-stats li > a,.mb-guests a,.mb-card h3 a,.mb-safe a,.mb-card > a:not(.btn),.mb-f > a:not(.btn){display:inline-flex;align-items:center;min-height:44px}
.mb-form input[type=file]{display:block;width:100%;min-height:48px;padding:10px 0;color:var(--ink);font:500 1rem/1.4 var(--body)}
[data-q-tick][data-q-tick-on]::before{content:"\2713\00a0"}
/* a mission that ticks itself has nothing to open: quests.js gives its big card no data-q-go, so no empty yellow label */
.q-big summary:not([data-q-go])::before{content:none;display:none}

/* ---- the way into a thing's own discussion, with how many people and comments it holds (community.js initTalkN, 15 October
   2026, Armin: "you should be able to see that there is an option to discuss this ... the number of people who have discussed
   it and the number of comments on it as a counter"). On every gathering card and on the gathering's own page; any page can
   carry one (data-talk-n="<key>"). A pill, 44px tall, that wraps on a narrow phone rather than running off the screen. */
.talk-n{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px;justify-self:start;max-width:100%;min-height:44px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;font:600 .95rem/1.3 var(--body)}
.talk-n:hover,.talk-n:focus-visible{background:var(--raise)}
.talk-n-i{display:inline-flex;color:var(--field)}
.talk-n-w{font-weight:800}
.talk-n-c{color:var(--dim);font-weight:600;overflow-wrap:anywhere}
.talk-n-c:empty{display:none}

/* ---- a gathering people want to join (15 October 2026, Armin: "make the events fun. When people see the listing they would
   want to join"). The picture at the top of every card (the host's, or a drawing for its kind, never a blank box), the hook,
   the address of a public place with its map, how many are going, why come, the video, and the From the night wall. */
.mb-cover{aspect-ratio:16/9;margin:calc(-1 * var(--s4)) calc(-1 * var(--s4)) var(--s1);border-radius:var(--r2,10px) var(--r2,10px) 0 0;overflow:hidden;background:var(--sunk)}
.mb-cover img{display:block;width:100%;height:100%;object-fit:cover}
.mb-cover-drawn{display:grid;place-items:center;color:var(--field);background:linear-gradient(135deg,var(--sunk),var(--raise))}
.mb-cover-drawn svg{width:38%;height:auto;max-height:80%}
.mb-cover-prev .mb-cover{margin:0;max-width:22rem;border-radius:var(--r)}
/* 16 October 2026 (Armin: "For gatherings that people have not added a cover for, you should add a cover yourself"): a
   drawing of the site's own (members.js artOf), with the day on it like a ticket, so a board of cards reads at a glance.
   The tile sits on a picture, never on the page ground, so its colours are its own. */
.mb-cover{position:relative}
.mb-cover-art img{filter:saturate(.92) contrast(1.04)}
.mb-day{position:absolute;inset-block-start:10px;inset-inline-start:10px;display:grid;justify-items:center;min-width:52px;padding:6px 8px 5px;
  background:rgba(12,12,11,.86);border:1px solid rgba(244,196,48,.55);border-radius:8px;color:#F3F1EA;line-height:1;box-shadow:0 2px 10px rgba(0,0,0,.45)}
.mb-day-m{font:800 .75rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#F4C430}
.mb-day b{font:800 1.55rem/1 var(--display);margin-top:3px}
.mb-front .mb-day{inset-block-start:8px;inset-inline-start:8px;min-width:44px;padding:4px 6px}
.mb-front .mb-day b{font-size:1.3rem}
/* the host picks a drawing: four across, each a 16:9 tap target of at least 44px */
.mb-art-pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);max-width:28rem}
.mb-art{display:block;padding:0;margin:0;border:2px solid transparent;border-radius:var(--r);overflow:hidden;background:var(--sunk);aspect-ratio:16/9;min-height:44px;cursor:pointer}
.mb-art img{display:block;width:100%;height:100%;object-fit:cover}
.mb-art[aria-pressed="true"]{border-color:var(--field);box-shadow:0 0 0 2px rgba(244,196,48,.25)}
/* after the night: did it happen (the host), the answer, Past gatherings */
.mb-asks{display:grid;gap:var(--s3);padding:var(--s4);background:var(--panel);border-radius:var(--r2,10px);border-inline-start:3px solid var(--field)}
.mb-ask-row{display:grid;gap:var(--s2);padding-top:var(--s3);border-top:1px solid var(--line);min-width:0}
.mb-ask-t{font-weight:700;overflow-wrap:anywhere}
.mb-ask-t a{display:inline-flex;align-items:center;min-height:44px}
.mb-held,.mb-held-next,.mb-happened{display:grid;gap:var(--s3);min-width:0}
.mb-held [hidden]{display:none}
.mb-held-acts,.mb-cal .mb-acts{display:flex;flex-wrap:wrap;gap:var(--s2)}
.mb-held-acts>*,.mb-cal .mb-acts>*{flex:1 1 9rem}
.mb-past .mb-cover-night img{filter:none}
.mb-hook{font-size:1.05rem;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.mb-whereb{display:grid;gap:2px;min-width:0}
.mb-venue{font-weight:700;overflow-wrap:anywhere}
.mb-map,.mb-vid{display:inline-flex;align-items:center;justify-self:start;min-height:44px;font-weight:700}
.mb-desc{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55;font-size:1.02rem}
.mb-details,.mb-sub{display:grid;gap:var(--s4);min-width:0}
.mb-sub[hidden]{display:none}
.mb-chips.mb-big .mb-chip,.mb-sub .mb-chip{flex:1 1 13rem;border-radius:var(--r);text-align:start;padding:10px 14px}
.mb-chip b{display:block}
.mb-chip span{display:block;margin-top:2px;font-weight:500;font-size:.86rem;opacity:.85}
.mb-going{list-style:none;margin:0;padding:0;display:grid;gap:var(--s1)}
.mb-going a{display:inline-flex;align-items:center;min-height:44px}
.mb-night{display:grid;gap:var(--s3)}
.mb-wall{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
@media(min-width:600px){.mb-wall{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mb-shot{display:grid;gap:var(--s2);padding:var(--s3);background:var(--panel);border-radius:var(--r);min-width:0}
.mb-shot img{display:block;width:100%;height:auto;border-radius:var(--r)}
.mb-shot-prev img{display:block;max-width:100%;max-height:240px;border-radius:var(--r)}
.mb-card .tv{min-width:0}

/* ---- the front page's board is a glance, not the gathering (15 October 2026). The phone test caps the front page at 4,500px
   and one gathering card had grown to over 1,100px (a cover, a hook, three buttons stacked, the Discuss counter). Here only:
   the cover is a short band, the hook two lines, and the actions two across with the counter in the same grid. The board
   (gatherings/) and the gathering's own page keep everything. */
.mb-front .mb-cover{aspect-ratio:auto;height:112px}
.mb-front .mb-hook{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mb-front .mb-acts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.mb-front .mb-acts>*{min-width:0}
.mb-front .mb-acts .talk-n{justify-content:center;border-radius:var(--r,8px);padding:6px 10px;text-align:center}
.mb-front .mb-acts .talk-n-c{flex-basis:100%;font-size:.82rem}
/* 16 October 2026: what a person did, and the team (members.js postsOf, feedOf, initCrew). */
.mb-marks{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;justify-content:inherit}
.mb-tag{display:inline-flex;align-items:center;min-height:28px;padding:2px 10px;border-radius:999px;border:1px solid var(--field);color:var(--field);font:700 .78rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.mb-tag-host{background:var(--field);color:var(--on-field)}
a.mb-tag{min-height:40px}
a.mb-tag:hover,a.mb-tag:focus-visible{background:color-mix(in oklab,var(--field) 18%,transparent)}
.mb-more{justify-self:inherit}
.mb-pic-host{background:var(--panel)}
.mb-pic-host img{object-fit:contain;padding:14%}
.mb-pic-host.mb-pic-full img{object-fit:cover;padding:0}
.mb-act{display:grid;gap:var(--s3);min-width:0}
.mb-actbar .mb-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.mb-actbar .mb-chip span,.mb-actbar .mb-chip b{display:inline;margin:0;font-size:.95rem;opacity:1}
.mb-actbar .mb-chip b{font-variant-numeric:tabular-nums;opacity:.75}
.mb-actlist{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.mb-actrow{display:grid;gap:6px;padding:var(--s3) var(--s4);background:var(--panel);border-radius:var(--r2,10px);border-inline-start:3px solid var(--line);min-width:0}
.mb-act-reply{border-inline-start-color:color-mix(in oklab,var(--field) 45%,var(--line))}
.mb-act-post{border-inline-start-color:var(--field)}
.mb-act-mission,.mb-act-gathering{border-inline-start-color:var(--ink)}
.mb-act-h{margin:0;line-height:1.45;overflow-wrap:anywhere}
.mb-act-h a{font-weight:700;padding:10px 0;margin:-10px 0}
.mb-act-k{color:var(--dim)}
.mb-act-h time{white-space:nowrap}
.mb-post-t{white-space:pre-line}
.mb-post-t.is-cut{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.mb-readmore{justify-self:start;min-height:44px;padding:0 2px;border:0;background:none;color:var(--field);font:700 .95rem/1 var(--body);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.mb-actmore{justify-self:center;min-height:44px}
.mb-actmore[hidden]{display:none}
.mb-crew{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
@media(min-width:760px){.mb-crew{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mb-crew-card{display:flex;gap:var(--s4);align-items:center;height:100%;box-sizing:border-box;padding:var(--s4);background:var(--panel);border:1px solid var(--line);border-radius:var(--r2,10px);color:var(--ink);text-decoration:none;min-width:0;transition:border-color .15s,transform .15s}
.mb-crew-card:hover,.mb-crew-card:focus-visible{border-color:var(--field);transform:translateY(-2px)}
.mb-crew-card .mb-pic{width:72px;height:72px;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--field)}
.mb-crew-card .mb-pic .av{font-size:2rem}
.mb-crew-who{display:grid;gap:4px;min-width:0}
.mb-crew-name{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;font-size:1.1rem;overflow-wrap:anywhere}
.mb-crew-bio{margin:0;color:var(--ink);opacity:.88;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.mb-crew-who .mb-hint{margin:0}

/* ---- the board grows itself (19 October 2026, Armin: "Significantly improve Gatherings ... Think outside the box"): the
   night everyone meets, the map of where we meet, Host one in two minutes, and Tonight / Tomorrow on every cover.
   members.js driveBox, mapBox, kitsBox, soon. Nothing here hides content to animate it back. */
.mb-soon{position:absolute;inset-block-start:10px;inset-inline-end:10px;padding:6px 10px;border-radius:999px;background:var(--field);color:var(--on-field);
  font:800 .8rem/1 var(--body);letter-spacing:.04em;text-transform:uppercase;box-shadow:0 2px 10px rgba(0,0,0,.45)}
.mb-soon.now{background:#C8102E;color:#fff}
.mb-front .mb-soon{inset-block-start:8px;inset-inline-end:8px;padding:5px 8px;font-size:.75rem}
.mb-drive{display:grid;gap:var(--s3);padding:var(--s4);border-radius:var(--r2,10px);background:radial-gradient(120% 140% at 0% 0%,rgba(217,180,90,.16),rgba(217,180,90,0) 60%),var(--panel);border-inline-start:3px solid var(--field)}
.mb-drive-n{display:flex;align-items:baseline;gap:10px;margin:0;color:var(--field)}
.mb-drive-n b{font:800 clamp(3rem,15vw,4.6rem)/.9 var(--display)}
.mb-drive-n span{font:800 1rem/1.2 var(--body);text-transform:uppercase;letter-spacing:.06em}
.mb-drive-t{display:grid;gap:var(--s2);justify-items:start;min-width:0}
.mb-drive-t p{margin:0;max-width:36rem}
.mb-drive-c{font-weight:700}
@media(min-width:620px){.mb-drive{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s5)}.mb-drive-n{flex-direction:column;align-items:center;gap:4px}}
.mb-map{display:grid;gap:var(--s2);min-width:0}
.mb-map .mb-h2,.mb-map p{margin:0}
.mb-map-n{font:800 1.25rem/1.2 var(--body);color:var(--field)}
.mb-tiles{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:3px;width:100%;max-width:30rem;margin-block:var(--s2)}
.mb-tile{display:grid;place-items:center;aspect-ratio:1;min-width:0;border-radius:4px;background:var(--sunk);color:var(--dim);font:700 12px/1 var(--body);border:1px solid var(--line)}
.mb-tile.on{background:var(--field);border-color:var(--field);color:var(--on-field);box-shadow:0 0 12px rgba(217,180,90,.45)}
.mb-tile.was{background:rgba(217,180,90,.18);border-color:var(--field-lo,#8E7434);color:var(--ink)}
.mb-map-key{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;font-size:.9rem;color:var(--dim)}
.mb-map-key .mb-tile{width:16px;height:16px;aspect-ratio:auto}
.mb-map-key .mb-tile + span{margin-inline-end:10px}
.mb-places .mb-chip b{display:inline}
.mb-light{justify-self:start}
.mb-empty-go{justify-self:start;width:max-content;max-width:100%}
.mb-kits{display:grid;gap:var(--s2)}
.mb-kits .mb-h2,.mb-kits > .mb-hint{margin:0}
.mb-kit-list{margin-top:var(--s2)}
@media(min-width:1000px){.mb-kit-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mb-kit-row .mb-acts .btn{flex:0 1 auto}