/* The member media feed in the Club tab (public/feed.js; preview only: the server adds this file only while the feed is
   on). Drawn to the approved concept (Issue #32, Oct 25) with the board's tokens (board.css); no new colours. */
[data-ui="board"] #lobby .cf{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--b-s3);margin:0 0 var(--b-s5);min-width:0}
[data-ui="board"] .cf .cf-ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[data-ui="board"] .cf .cf-head{display:flex;align-items:baseline;gap:var(--b-s2);padding:var(--b-s1) 2px 0}
[data-ui="board"] .cf :is(.cf-head,.cf-fhead) h2{margin:0;font-size:var(--b-t-11);font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--b-gold)}
[data-ui="board"] .cf .cf-head small{font-size:12px;color:var(--b-text-2)}

/* 1. At the Club: the rail of faces */
[data-ui="board"] .cf .cf-rail{display:flex;gap:var(--b-s3);overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--b-s2));padding:2px var(--b-s2) 0;scroll-snap-type:x proximity}
[data-ui="board"] .cf .cf-rail::-webkit-scrollbar{display:none}
[data-ui="board"] .cf .cf-face{position:relative;display:grid;justify-items:center;gap:6px;width:64px;padding:0;border:0;background:none;color:var(--b-text);scroll-snap-align:start}
[data-ui="board"] .cf .cf-ring{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;padding:3px;box-sizing:border-box;background:linear-gradient(145deg,var(--b-gold-text),var(--b-gold) 45%,var(--b-raise-bot))}
[data-ui="board"] .cf .cf-ring .av{width:100%;height:100%;margin:0;border:2px solid var(--b-bg);box-sizing:border-box;font-size:var(--b-t-17)}
[data-ui="board"] .cf .cf-face.seen .cf-ring{background:var(--b-hair)}
[data-ui="board"] .cf .cf-you:not(.has) .cf-ring{background:var(--b-surface-2)}
[data-ui="board"] .cf .cf-plus{position:absolute;top:36px;left:calc(50% + 10px);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--b-gold);color:var(--b-raise-label);border:2px solid var(--b-bg)}
[data-ui="board"] .cf .cf-plus .cf-ic{width:16px;height:16px;stroke-width:2.8}
/* Add a moment, next to Your moment once one is up: a dashed gold ring with a + */
[data-ui="board"] .cf .cf-add .cf-ring{background:none;border:2px dashed var(--b-gold);color:var(--b-gold)}
[data-ui="board"] .cf .cf-add .cf-ring .cf-ic{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
/* the post and moment sheets: Post stays in view at the foot of the sheet while it scrolls (owner, Oct 26) */
#modalRoot .glass:has(#cfNew){overscroll-behavior:contain}
#modalRoot .glass:has(#cfNew)>.row{position:sticky;bottom:-16px;margin:0 -16px -16px;padding:12px 16px calc(16px + env(safe-area-inset-bottom,0px));background:var(--b-surface);border-top:1px solid var(--b-hair);z-index:2}
[data-ui="board"] .cf .cf-fname{max-width:72px;font-size:var(--b-t-11);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-ui="board"] .cf .cf-fname em{font-style:normal;color:var(--b-gold-text)}
[data-ui="board"] .cf .cf-rail-none{margin:0;font-size:var(--b-t-13);color:var(--b-text-2)}
[data-ui="board"] .cf .cf-face:focus-visible{outline:2px solid var(--b-gold);outline-offset:2px;border-radius:12px}

/* 2. Club Feed: the heading, the filters and the cards */
[data-ui="board"] .cf .cf-fhead{display:flex;align-items:center;gap:var(--b-s2);margin-top:var(--b-s2)}
[data-ui="board"] .cf .cf-fhead h2{flex:none;width:4.4em;line-height:1.3;font-size:var(--b-t-11)}
[data-ui="board"] .cf .cf-chips{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0}
[data-ui="board"] .cf .cf-chips::-webkit-scrollbar{display:none}
[data-ui="board"] .cf .cf-chip{flex:none;min-height:var(--b-tap);padding:0;border:0;background:none;display:grid;align-items:center}
[data-ui="board"] .cf .cf-chip span{display:block;white-space:nowrap;padding:5px 11px;border-radius:var(--b-r-pill);border:1px solid var(--b-hair);background:var(--b-surface);color:var(--b-text);font-size:12px;line-height:1.15;font-weight:600;text-align:center}
[data-ui="board"] .cf .cf-chip[data-cffilter="night"] span{white-space:normal;width:min-content}
[data-ui="board"] .cf .cf-chip[aria-pressed="true"] span{background:var(--b-raise);border-color:transparent;color:var(--b-raise-label)}
[data-ui="board"] .cf .cf-chip:focus-visible span{outline:2px solid var(--b-gold);outline-offset:2px}
[data-ui="board"] .cf .cf-list{display:grid;gap:var(--b-s4)}
[data-ui="board"] .cf .cf-card{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--b-hair);background:var(--b-surface);aspect-ratio:366/310;max-width:100%;isolation:isolate}
[data-ui="board"] .cf .cf-media{position:absolute;inset:0;z-index:-2;background:var(--b-surface-2)}
[data-ui="board"] .cf .cf-media :is(img,video){width:100%;height:100%;object-fit:cover;display:block}
/* a tall post fills the card and stands no taller than the screen between the bar and the tabs */
[data-ui="board"] .cf .cf-card[style*="aspect-ratio"]{width:100%;margin-inline:auto;box-sizing:border-box;max-height:calc(100dvh - 120px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
/* (a phone: every card is the column's full width, an upright clip trimmed top and bottom to the room between the bar and the tabs; owner,
   Oct 26: a narrower upright card left navy bands at its sides. A wide screen: an upright card no wider than 1.15
   times its own shape at the screen's height, centred, so it never becomes a huge trimmed strip) */
@media (min-width:700px){[data-ui="board"] .cf .cf-card[style*="aspect-ratio"]{width:min(100%,calc((100dvh - 200px) * var(--ar) * 1.15))}}
[data-ui="board"] .cf .cf-ring .cf-cover{overflow:hidden;padding:0}
[data-ui="board"] .cf .cf-ring .cf-cover img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
[data-ui="board"] .cf-sheet .cf-also{display:flex;gap:10px;align-items:center;min-height:var(--b-tap);font-size:var(--b-t-14);text-align:left}
[data-ui="board"] .cf-sheet .cf-also input{flex:none;width:20px;min-width:20px;max-width:20px;height:20px;margin:0;accent-color:var(--b-gold)}
[data-ui="board"] .cf .cf-win img{object-fit:contain;object-position:50% 50%}
[data-ui="board"] .cf .cf-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--b-bg) 40%,transparent) 0,transparent 24%,transparent 46%,color-mix(in srgb,var(--b-bg) 88%,transparent) 100%)}
[data-ui="board"] .cf .cf-play{position:absolute;inset:0;width:100%;height:100%;border:0;background:none;color:var(--b-text);display:grid;place-items:center}
/* (a small glass badge, not a big generic button: the whole card is the tap; Muse, Oct 25) */
[data-ui="board"] .cf .cf-play .cf-ic{width:38px;height:38px;padding:11px 10px 11px 12px;border-radius:50%;background:color-mix(in srgb,var(--b-bg) 45%,transparent);border:1px solid var(--b-hair-gold);fill:var(--b-gold-text);stroke:none;box-sizing:border-box;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .2s}
[data-ui="board"] .cf .cf-card.on .cf-play .cf-ic{opacity:0}
[data-ui="board"] .cf :is(.cf-pin,.cf-dur){position:absolute;top:12px;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--b-r-pill);background:color-mix(in srgb,var(--b-bg) 70%,transparent);color:var(--b-text);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
[data-ui="board"] .cf .cf-pin{left:12px;border:1px solid var(--b-hair-gold);color:var(--b-gold);letter-spacing:.06em;text-transform:uppercase;font-size:11px}
[data-ui="board"] .cf .cf-dur{right:12px}
/* the right rail: like, comment, share */
[data-ui="board"] .cf .cf-acts{position:absolute;right:6px;bottom:72px;display:grid;gap:2px}
[data-ui="board"] .cf .cf-act{display:grid;justify-items:center;gap:1px;min-width:var(--b-tap);min-height:var(--b-tap);padding:4px 0;border:0;background:none;color:var(--b-text);text-shadow:0 1px 3px var(--b-bg)}
[data-ui="board"] .cf .cf-act .cf-ic{filter:drop-shadow(0 2px 6px rgba(0,0,0,.8))}
[data-ui="board"] .cf .cf-act small{text-shadow:0 1px 4px rgba(0,0,0,.9);font-size:var(--b-t-11);font-weight:600;font-variant-numeric:tabular-nums}
[data-ui="board"] .cf .cf-act.on{color:var(--b-live)}
[data-ui="board"] .cf .cf-act.on .cf-ic{fill:currentColor}
[data-ui="board"] .cf .cf-act:active{transform:scale(var(--b-press-scale))}
[data-ui="board"] .cf .cf-act:focus-visible{outline:2px solid var(--b-gold);outline-offset:-2px;border-radius:12px}
/* the foot: face, name, line, caption */
[data-ui="board"] .cf .cf-foot{position:absolute;left:14px;right:60px;bottom:12px;display:grid;gap:2px;pointer-events:none}
[data-ui="board"] .cf .cf-who{pointer-events:auto;display:flex;align-items:center;gap:10px;min-height:var(--b-tap);padding:0;border:0;background:none;color:var(--b-text);text-align:left;width:fit-content;max-width:100%}
[data-ui="board"] .cf .cf-ring.sm{width:36px;height:36px;padding:2px;flex:none}
[data-ui="board"] .cf .cf-ring.sm .av{font-size:var(--b-t-13);border-width:1.5px}
[data-ui="board"] .cf .cf-who-t{display:grid;min-width:0}
[data-ui="board"] .cf .cf-who-t b{font-size:var(--b-t-15);font-weight:700;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-ui="board"] .cf .cf-who-t small{font-size:12px;line-height:1.3;color:var(--b-text-2)}
[data-ui="board"] .cf .cf-who-t small span{white-space:nowrap}
[data-ui="board"] .cf .cf-who-t small i{font-style:normal}
[data-ui="board"] .cf .cf-last{display:grid;gap:1px;min-height:var(--b-tap);margin:0 0 -8px;padding:4px 0 0;border:0;background:none;color:var(--b-text);font:inherit;font-size:var(--b-t-13);text-align:left;pointer-events:auto;text-shadow:0 1px 3px var(--b-bg)}
[data-ui="board"] .cf .cf-last span{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
[data-ui="board"] .cf .cf-last small{color:var(--b-text-2);font-size:var(--b-t-11)}
[data-ui="board"] .cf .cf-cap{margin:0;font-size:var(--b-t-13);line-height:1.35;color:var(--b-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;text-shadow:0 1px 3px var(--b-bg)}
/* a club event's card: the answer buttons on it (pointer-events back on inside the foot) */
[data-ui="board"] .cf .cf-cev{display:grid;gap:6px;margin-top:6px;pointer-events:auto}
[data-ui="board"] .cf .cf-cev small{font-size:12px;color:var(--b-text-2);text-shadow:0 1px 3px var(--b-bg)}
[data-ui="board"] .cf .cf-cev-rs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
[data-ui="board"] .cf .cf-cev-r{min-height:var(--b-tap);padding:0 4px;border-radius:var(--b-r-btn);border:1px solid var(--b-hair);background:var(--b-surface-2);color:var(--b-text);font:600 var(--b-t-13)/1 var(--b-font);white-space:nowrap;cursor:pointer}
[data-ui="board"] .cf .cf-cev-r.on{background:var(--b-gold-fill);border-color:var(--b-gold);color:var(--b-gold-text)}
[data-ui="board"] .cf .cf-cev-r:disabled{opacity:.45;cursor:default}
[data-ui="board"] .cf .cf-cev-r:focus-visible{outline:2px solid var(--b-gold);outline-offset:2px}
/* a business or sponsor card: its logo on the board's surface, the name under it */
[data-ui="board"] .cf .cf-logo{display:grid;place-content:center;justify-items:center;gap:6px;padding-bottom:72px;text-align:center;color:var(--b-text);background:radial-gradient(90% 70% at 50% 30%,var(--b-gold-fill),transparent 70%),var(--b-surface-2)}
[data-ui="board"] .cf .cf-logo-k{font-size:var(--b-t-11);font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--b-gold)}
[data-ui="board"] .cf .cf-logo .bz-logo{width:84px;height:84px;border-radius:20px;font-size:var(--b-t-28)}
[data-ui="board"] .cf .cf-logo b{font-size:var(--b-t-20);font-weight:600}
[data-ui="board"] .cf .cf-logo small{font-size:var(--b-t-13);color:var(--b-text-2)}
/* a business's card (owner, Oct 28: logos looked dark, and long names and areas ran under the like and comment icons):
   the shade only behind the byline at the foot, never over the logo or the name; the logo whole on a white plate; the
   text kept clear of the icon column on both sides so it stays centred; the name at most two lines, the line under it one */
[data-ui="board"] .cf .cf-card:has(.cf-logo) .cf-shade{background:linear-gradient(180deg,transparent 0,transparent 66%,color-mix(in srgb,var(--b-bg) 88%,transparent) 100%)}
[data-ui="board"] .cf .cf-logo{padding-inline:64px}
[data-ui="board"] .cf .cf-logo .bz-logo img{object-fit:contain;object-position:50% 50%;padding:8%;box-sizing:border-box;background:#fff}
[data-ui="board"] .cf .cf-logo b{max-width:100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;line-height:1.2}
[data-ui="board"] .cf .cf-logo small{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-ui="board"] .cf .cf-win.none{background:var(--b-surface-2)}
/* empty, loading, more */
[data-ui="board"] .cf .cf-none{margin:0;padding:var(--b-s5);border-radius:var(--b-r-card);border:1px solid var(--b-hair);background:var(--b-surface);color:var(--b-text-2);font-size:var(--b-t-14);display:grid;gap:var(--b-s3)}
[data-ui="board"] .cf .cf-none p{margin:0}
[data-ui="board"] .cf :is(.cf-more,.cf-link){min-height:var(--b-tap);border:0;background:none;color:var(--b-gold);font-size:var(--b-t-14);font-weight:600;padding:0 var(--b-s2)}
[data-ui="board"] .cf .cf-first{min-height:48px}

/* 3. the gold + over the tab bar */
[data-ui="board"] #lobby .cf-fab{position:fixed;z-index:15;bottom:calc(56px + var(--sa-b) + 16px);right:max(16px,calc(50vw - 270px + 16px));width:52px;height:52px;border-radius:50%;border:0;display:grid;place-items:center;
  background:var(--b-raise);color:var(--b-raise-label);box-shadow:0 10px 24px var(--b-shadow),inset 0 1px 0 var(--b-btn-hi)}
[data-ui="board"] #lobby .cf-fab .cf-ic{width:28px;height:28px;stroke-width:2.4;fill:none;stroke:currentColor;stroke-linecap:round}
[data-ui="board"] #lobby .cf-fab{transition:transform .2s ease,opacity .2s ease}
[data-ui="board"] #lobby .cf-fab.away{transform:translateY(calc(100% + 32px));opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){[data-ui="board"] #lobby .cf-fab{transition:none}}
[data-ui="board"] #lobby .cf-fab:active{transform:scale(var(--b-press-scale))}
[data-ui="board"] #lobby .cf-fab:focus-visible{outline:2px solid var(--b-gold-text);outline-offset:3px}

/* sheets: comments and posting */
[data-ui="board"] .cf-sheet{display:grid;gap:var(--b-s3);text-align:left}
[data-ui="board"] .cf-sheet h2{margin:0}
[data-ui="board"] .cf-sheet .note{margin:0}
[data-ui="board"] .cf-sheet .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[data-ui="board"] .cf-sheet textarea{width:100%;box-sizing:border-box;min-height:48px;padding:10px 12px;border-radius:var(--b-r-plate);border:1px solid var(--b-hair);background:var(--b-surface-2);color:var(--b-text);font:inherit;font-size:16px;resize:vertical}
[data-ui="board"] .cf-sheet .cf-ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
[data-ui="board"] .cf-cm-list{display:grid;gap:var(--b-s3);max-height:40vh;overflow:auto}
[data-ui="board"] .cf-cm{display:flex;gap:10px;align-items:flex-start}
[data-ui="board"] .cf-cm p{margin:0;flex:1;min-width:0;font-size:var(--b-t-14);overflow-wrap:anywhere}
[data-ui="board"] .cf-cm p small{display:block;color:var(--b-text-3);font-size:var(--b-t-11)}
[data-ui="board"] .cf-cm-x{flex:none;width:var(--b-tap);height:var(--b-tap);margin:-10px -10px 0 0;border:0;background:none;color:var(--b-text-2);display:grid;place-items:center}
[data-ui="board"] :is(.cf-cm,.cf-story-who) .cf-ring.xs{flex:none;width:32px;height:32px;padding:2px;border-radius:50%;box-sizing:border-box;background:linear-gradient(145deg,var(--b-gold-text),var(--b-gold) 45%,var(--b-raise-bot));display:grid}
[data-ui="board"] :is(.cf-cm,.cf-story-who) .cf-ring.xs .av{width:100%;height:100%;margin:0;font-size:var(--b-t-11);border:1.5px solid var(--b-bg);box-sizing:border-box}
[data-ui="board"] .cf-cm-form{display:flex;gap:var(--b-s2);align-items:flex-end}
[data-ui="board"] .cf-cm-form .btn{flex:none;min-height:48px;background:var(--b-raise);border:0;color:var(--b-raise-label)}
[data-ui="board"] .cf-sheet .cf-link{min-height:var(--b-tap);border:0;background:none;color:var(--b-live);font-weight:600;justify-self:start;padding:0}
[data-ui="board"] .cf-pick{position:relative;display:grid;place-items:center;min-height:64px;border-radius:var(--b-r-card);border:1px dashed var(--b-hair-gold);background:var(--b-gold-fill);color:var(--b-gold-text);font-weight:600}
[data-ui="board"] .cf-pick input{position:absolute;inset:0;opacity:0;width:100%;height:100%}
[data-ui="board"] .cf-pick.chosen{min-height:44px;font-size:var(--b-t-14)}
[data-ui="board"] .cf-cams{display:grid;grid-template-columns:1fr 1fr;gap:8px}
[data-ui="board"] .cf-pick.cf-cam{min-height:48px;font-size:var(--b-t-14)}
[data-ui="board"] .cf-pick:focus-within{outline:2px solid var(--b-gold);outline-offset:2px}
[data-ui="board"] .cf-prev{border-radius:var(--b-r-card);overflow:hidden;background:var(--b-surface-2);max-height:24vh;display:grid;place-items:center}
[data-ui="board"] .cf-prev :is(img,video){width:100%;max-height:24vh;object-fit:contain;display:block}
[data-ui="board"] .cf-tags{display:flex;flex-wrap:wrap;gap:var(--b-s2)}
[data-ui="board"] .cf-tags label{flex:none;display:flex;align-items:center;gap:8px;min-height:var(--b-tap);padding:0 16px 0 12px;white-space:nowrap;border-radius:var(--b-r-pill);border:1px solid var(--b-hair);background:var(--b-surface-2);font-size:var(--b-t-14)}
[data-ui="board"] .cf-tags label:has(input:checked){border-color:var(--b-hair-gold);background:var(--b-gold-fill);color:var(--b-gold-text)}
/* the radio drawn here, the same on every phone (owner, Oct 26: on an iPhone Safari stretched it across the pill and
   pushed "Moment" out of it) */
[data-ui="board"] .cf-tags input{-webkit-appearance:none;appearance:none;flex:none;width:18px;min-width:18px;max-width:18px;height:18px;margin:0;padding:0;border-radius:50%;border:2px solid var(--b-text-3);background:none;box-shadow:none}
[data-ui="board"] .cf-tags input:checked{border-color:var(--b-gold);background:radial-gradient(circle,var(--b-gold) 0 4px,transparent 4.5px)}
[data-ui="board"] .cf-tags input:focus-visible{outline:2px solid var(--b-gold);outline-offset:2px}

/* moments, full screen */
[data-ui="board"] .cf-story{position:fixed;inset:0;z-index:60;background:var(--b-bg);display:grid;place-items:center;color:var(--b-text)}
/* the moment fills the screen and shows whole on any screen (owner, Oct 26: on a computer an upright clip grew to its
   own height and ran off the screen) */
[data-ui="board"] .cf-story>:is(img,video){position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
[data-ui="board"] .cf-story-bars{position:absolute;top:calc(8px + env(safe-area-inset-top,0px));left:12px;right:12px;display:flex;gap:4px;z-index:2}
[data-ui="board"] .cf-story-bars i{flex:1;height:3px;border-radius:2px;background:var(--b-hair)}
[data-ui="board"] .cf-story-bars i:is(.done,.now){background:var(--b-gold-text)}
[data-ui="board"] .cf-story-who{position:absolute;top:calc(20px + env(safe-area-inset-top,0px));left:12px;right:4px;display:flex;align-items:center;gap:10px;z-index:2;text-shadow:0 1px 3px var(--b-bg)}
[data-ui="board"] .cf-story-who small{color:var(--b-text-2)}
[data-ui="board"] .cf-story-x{margin-left:auto;width:var(--b-tap);height:var(--b-tap);border:0;background:none;color:var(--b-text);display:grid;place-items:center}
[data-ui="board"] .cf-story-x .cf-ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
[data-ui="board"] :is(.cf-story-cap,.cf-story-views){position:absolute;left:16px;right:16px;margin:0;z-index:2;text-shadow:0 1px 3px var(--b-bg)}
[data-ui="board"] .cf-story-cap{bottom:calc(48px + env(safe-area-inset-bottom,0px));font-size:var(--b-t-15)}
[data-ui="board"] .cf-story-views{bottom:calc(16px + env(safe-area-inset-bottom,0px));font-size:var(--b-t-13);color:var(--b-text-2)}
@media (prefers-reduced-motion: reduce){[data-ui="board"] :is(.cf-act,#lobby .cf-fab):active{transform:none}}
/* Issue #42 P1: the author's own "Seen by" line, and the line between what this member has not viewed and what they have */
[data-ui="board"] .cf .cf-seenby{display:block;min-height:var(--b-tap);margin:0 0 -10px;padding:0;border:0;background:none;color:var(--b-gold);font:inherit;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;text-align:left;pointer-events:auto}
/* Insights (Issue #42 P2): the author's own sheet */
[data-ui="board"] .cf-in h3{margin:var(--b-s2) 0 0;font-size:var(--b-t-14);color:var(--b-text-2);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
[data-ui="board"] .cf-in-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--b-s2)}
[data-ui="board"] .cf-in-stats div{padding:10px 12px;border-radius:var(--b-r-plate);border:1px solid var(--b-hair);background:var(--b-surface-2);min-width:0}
[data-ui="board"] .cf-in-stats b{display:block;color:var(--b-gold);font-size:22px;font-variant-numeric:tabular-nums}
[data-ui="board"] .cf-in-stats small{display:block;color:var(--b-text-2);font-size:var(--b-t-11);overflow-wrap:anywhere}
[data-ui="board"] .cf-in-how{font-size:var(--b-t-11)}
[data-ui="board"] .cf-in-list{display:grid;gap:var(--b-s2);max-height:36vh;overflow:auto}
[data-ui="board"] .cf-in-row{display:flex;gap:10px;align-items:center}
[data-ui="board"] .cf-in-row p{margin:0;flex:1;min-width:0;text-align:left;font-size:var(--b-t-14);overflow-wrap:anywhere}
[data-ui="board"] .cf-in-row p small{display:block;color:var(--b-text-3);font-size:var(--b-t-11)}
[data-ui="board"] .cf-in-row .cf-ring.xs{flex:none;width:32px;height:32px;padding:2px;border-radius:50%;box-sizing:border-box;background:linear-gradient(145deg,var(--b-gold-text),var(--b-gold) 45%,var(--b-raise-bot));display:grid}
[data-ui="board"] .cf-in-row .cf-ring.xs .av{width:100%;height:100%;margin:0;font-size:var(--b-t-11);border:1.5px solid var(--b-bg);box-sizing:border-box}
[data-ui="board"] .cf-in-btn{flex:none;min-height:var(--b-tap);padding:0 14px;border-radius:999px;border:1px solid var(--b-hair);background:none;color:var(--b-text);font:inherit;font-size:var(--b-t-14);font-weight:600}
[data-ui="board"] .cf-in-btn.gold{border-color:var(--b-gold);color:var(--b-gold)}
[data-ui="board"] .cf-in-btn:disabled{color:var(--b-text-3)}
[data-ui="board"] .cf-in-state{flex:none;color:var(--b-text-2);font-size:var(--b-t-11);font-weight:600}
[data-ui="board"] .cf-in-contact{display:grid;text-align:left;gap:4px;padding:0 0 0 42px;font-size:var(--b-t-14)}
[data-ui="board"] .cf-in-contact a{color:var(--b-gold);overflow-wrap:anywhere}
[data-ui="board"] .cf-in-contact p{margin:0;color:var(--b-text-2)}
[data-ui="board"] .cf .cf-caught{margin:8px 0;padding:10px 0;text-align:center;color:var(--b-text-2,var(--b-text));font-size:13px;letter-spacing:.04em;border-top:1px solid var(--b-hair-gold);border-bottom:1px solid var(--b-hair-gold)}

/* ---------- Home: the moments row and the newest post (owner, Oct 26) ---------- */
[data-ui="board"] #lobby .cf.cf-home{gap:var(--b-s2)}
[data-ui="board"] .cf-home .cf-head{align-items:center;justify-content:space-between}
[data-ui="board"] .cf-home .cf-hall{min-height:var(--b-tap);padding:0 2px;background:none;border:0;color:var(--b-gold);font-size:var(--b-t-13);font-weight:600}
[data-ui="board"] .cf-home .cf-hpost{display:flex;align-items:center;gap:var(--b-s3);width:100%;min-height:72px;padding:10px 12px;text-align:left;
  background:var(--b-surface);border:1px solid var(--b-hair);border-radius:var(--b-r-card);color:var(--b-text)}
[data-ui="board"] .cf-home .cf-hthumb{position:relative;flex:none;width:52px;height:52px;border-radius:10px;overflow:hidden;background:var(--b-surface-2);display:grid;place-items:center}
[data-ui="board"] .cf-home .cf-hthumb img{width:100%;height:100%;object-fit:cover;display:block}
[data-ui="board"] .cf-home .cf-hthumb i{position:absolute;inset:auto 4px 4px auto;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--b-bg) 70%,transparent);color:var(--b-gold-text)}
[data-ui="board"] .cf-home .cf-hthumb i svg{width:10px;height:10px}
[data-ui="board"] .cf-home .cf-ht{display:grid;gap:2px;min-width:0}
[data-ui="board"] .cf-home .cf-ht small{font-size:12px;color:var(--b-text-2)}
[data-ui="board"] .cf-home .cf-ht b{font-size:var(--b-t-15);font-weight:700}
[data-ui="board"] .cf-home .cf-ht span{font-size:var(--b-t-14);color:var(--b-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* (a card scrolled to, from Home or a shared link, stops below the sticky bar instead of under it) */
[data-ui="board"] .cf .cf-card{scroll-margin-top:calc(64px + env(safe-area-inset-top,0px))}

/* ---------- Home's hero and From the Club Today (Muse's Home concept, owner Oct 26) ---------- */
[data-ui="board"] #lobby .b-club.has-hero>.b-sec-head{display:none}
[data-ui="board"] #lobby .b-club-frame.cf-hero{aspect-ratio:6 / 5;max-height:62vh;display:block;padding:0;overflow:hidden}
[data-ui="board"] #lobby .b-club-frame.cf-hero::before{z-index:1}
[data-ui="board"] .cf-hero .cf-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
[data-ui="board"] .cf-hero .cf-hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--b-bg) 45%,transparent) 0,transparent 26%,transparent 42%,color-mix(in srgb,var(--b-bg) 90%,transparent) 100%)}
[data-ui="board"] .cf-hero .cf-hero-k{position:absolute;top:22px;left:22px;font-size:var(--b-t-11);font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--b-gold-text)}
[data-ui="board"] .cf-hero .cf-hero-t{position:absolute;left:22px;right:22px;bottom:64px;display:grid;gap:4px}
[data-ui="board"] .cf-hero .cf-hero-t b{font-family:var(--b-serif);font-size:30px;font-weight:600;line-height:1.08;color:var(--b-text);text-wrap:balance;text-shadow:0 1px 6px var(--b-bg)}
[data-ui="board"] .cf-hero .cf-hero-t span{font-size:var(--b-t-14);line-height:1.35;color:var(--b-text);text-shadow:0 1px 4px var(--b-bg)}
[data-ui="board"] .cf-hero .cf-hero-foot{position:absolute;left:22px;right:16px;bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:var(--b-s2)}
[data-ui="board"] .cf-hero .cf-hero-foot small{min-width:0;font-size:12px;color:var(--b-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 4px var(--b-bg)}
[data-ui="board"] .cf-hero .cf-hero-go{flex:none;padding:7px 14px;border-radius:var(--b-r-pill);background:var(--b-gold-text);color:var(--b-bg);font-size:var(--b-t-13);font-weight:700}
[data-ui="board"] .cf-hero .cf-hero-hit{position:absolute;inset:0;z-index:2;width:100%;height:100%;padding:0;border:0;background:none;border-radius:inherit;cursor:pointer}
[data-ui="board"] .cf-hero .cf-hero-hit:focus-visible{outline:2px solid var(--b-gold);outline-offset:-4px}
[data-ui="board"] :is(.cf-hero,.cf-tcard) .cf-vmark{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--b-bg) 65%,transparent);color:var(--b-gold-text)}
[data-ui="board"] :is(.cf-hero,.cf-tcard) .cf-vmark svg{width:16px;height:16px;fill:currentColor;stroke:none}
[data-ui="board"] .cf-today .cf-head small{color:var(--b-gold-text);font-weight:600}
[data-ui="board"] .cf-today .cf-tcard{position:relative;display:block;width:100%;max-height:70vh;padding:0;overflow:hidden;isolation:isolate;text-align:left;border:1px solid var(--b-hair-gold);border-radius:var(--b-r-card);background:var(--b-surface);color:var(--b-text);cursor:pointer}
[data-ui="board"] .cf-today .cf-tcard>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:-2}
[data-ui="board"] .cf-today .cf-tfoot{position:absolute;left:16px;right:16px;bottom:14px;display:grid;gap:6px}
[data-ui="board"] .cf-today .cf-tcard:focus-visible{outline:2px solid var(--b-gold);outline-offset:2px}
@media (max-width:359px){
  [data-ui="board"] .cf-hero .cf-hero-t b{font-size:24px}
  [data-ui="board"] .cf-hero .cf-hero-t{left:18px;right:18px;bottom:72px}
  [data-ui="board"] .cf-hero .cf-hero-foot{left:18px;right:12px;bottom:14px}
  [data-ui="board"] .cf-hero .cf-hero-foot small{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  [data-ui="board"] .cf-hero .cf-hero-go{padding:7px 11px}
}
[data-ui="board"] .cf-today .cf-head{flex-wrap:wrap;row-gap:2px}
[data-ui="board"] .cf-today .cf-head small{white-space:nowrap}

/* ---------- The Exchange, premium (owner brief, Oct 26): the Wall, the business page and the three-step join ---------- */
/* the Wall: one column of large photo cards; the photo fills the card and the words sit on a local fade at the foot */
[data-ui="board"] #lobby .bzw-wall{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--b-s4)}
[data-ui="board"] #lobby .bzw-card{position:relative;display:block;width:100%;max-width:100%;aspect-ratio:4 / 5;padding:0;border:1px solid var(--b-hair-gold);border-radius:var(--b-r-card);overflow:hidden;
  background:var(--bzw-tint,var(--b-surface));color:var(--b-text);font:inherit;text-align:left;cursor:pointer;box-shadow:var(--b-lux-depth);transition:transform var(--b-press-dur)}
[data-ui="board"] #lobby .bzw-card:active{transform:scale(.985)}
[data-ui="board"] #lobby .bzw-card:focus-visible{outline:2px solid var(--b-gold);outline-offset:2px}
[data-ui="board"] .bzw-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
[data-ui="board"] .bzw-fade{position:absolute;left:0;right:0;bottom:0;height:44%;background:linear-gradient(180deg,transparent 0,color-mix(in srgb,var(--b-bg) 55%,transparent) 45%,color-mix(in srgb,var(--b-bg) 88%,transparent) 100%)}
[data-ui="board"] .bzw-txt{position:absolute;left:20px;right:20px;bottom:20px;display:grid;gap:6px}
[data-ui="board"] .bzw-kicker{font-size:var(--b-t-11);font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--b-gold-text);text-shadow:0 1px 4px var(--b-bg)}
[data-ui="board"] .bzw-name{font-family:var(--b-serif);font-size:30px;font-weight:600;line-height:1.06;text-wrap:balance;overflow-wrap:anywhere;text-shadow:0 1px 6px var(--b-bg)}
[data-ui="board"] .bzw-line{font-size:var(--b-t-14);line-height:1.35;color:var(--b-text);opacity:.86;text-shadow:0 1px 4px var(--b-bg);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
[data-ui="board"] .bzw-go{justify-self:start;margin-top:2px;font-size:var(--b-t-13);font-weight:600;color:var(--b-gold,#d8b26a);text-shadow:0 1px 4px var(--b-bg)}
[data-ui="board"] .bzw-label{position:absolute;top:16px;left:16px;padding:5px 10px;border-radius:var(--b-r-pill);border:1px solid var(--b-hair-gold);background:color-mix(in srgb,var(--b-bg) 72%,transparent);
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--b-gold-text)}
[data-ui="board"] .bzw-demo{position:absolute;top:16px;right:16px}
[data-ui="board"] .bzw-more{display:grid;gap:var(--b-s2);margin-top:var(--b-s2)}
[data-ui="board"] .bzw-more:empty{display:none}
[data-ui="board"] .bzw-rows{display:flex;flex-direction:column;background:var(--b-surface);border:1px solid var(--b-hair);border-radius:var(--b-r-card);overflow:hidden}
[data-ui="board"] .bzw-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;grid-template-areas:"m n d c" "m t d c";column-gap:var(--b-s3);align-items:center;column-gap:var(--b-s2);min-height:56px;padding:10px var(--b-s4);
  border:0;border-top:1px solid var(--b-hair);background:none;color:var(--b-text);font:inherit;text-align:left;cursor:pointer}
[data-ui="board"] .bzw-row:first-child{border-top:0}
[data-ui="board"] .bzw-row b{grid-area:n;font-family:var(--b-serif);font-size:var(--b-t-20);font-weight:600;overflow-wrap:anywhere}
[data-ui="board"] .bzw-row small{grid-area:t;font-size:var(--b-t-11);letter-spacing:.18em;text-transform:uppercase;color:var(--b-gold-text)}
[data-ui="board"] .bzw-row .demo-tag{grid-area:d}
[data-ui="board"] .bzw-row .bzw-chev{grid-area:c;width:18px;height:18px;fill:none;stroke:var(--b-text-2);stroke-width:2}

/* the business page: the club's hero frame, then proof, perk, services, work and the one gold button */
[data-ui="board"] .bzp-hero{position:relative;width:100%;max-width:100%;aspect-ratio:4 / 5;max-height:72vh;border-radius:var(--b-r-card);overflow:hidden;border:1px solid var(--b-hair-gold);
  background:var(--b-lux-panel);box-shadow:var(--b-lux-depth);margin-bottom:var(--b-s4)}
[data-ui="board"] .bzp-hero::before{content:"";position:absolute;inset:8px;z-index:1;border:1px solid var(--b-gold-line);border-radius:calc(var(--b-r-card) - 6px);pointer-events:none}
/* (no photo: a title card, its height from its content: the member's logo or the trade's gold mark, then the name) */
[data-ui="board"] .bzp-hero.bare{aspect-ratio:auto;max-height:none;display:grid;justify-items:center;align-content:center;gap:var(--b-s4);padding:56px 24px 32px;text-align:center}
[data-ui="board"] .bzp-hero.bare .bzp-t{position:static;justify-items:center}
[data-ui="board"] .bzp-hero.bare .bzp-t b{text-shadow:none}
[data-ui="board"] .bzp-mark{display:grid;place-items:center;width:104px;height:104px;border-radius:24px;overflow:hidden;background:var(--b-surface);border:1px solid var(--b-hair-gold);box-shadow:var(--b-lux-depth)}
[data-ui="board"] .bzp-mark.ic{border-radius:50%;background:var(--b-gold-fill);color:var(--b-gold-text);box-shadow:0 0 0 8px color-mix(in srgb,var(--b-gold) 6%,transparent)}
[data-ui="board"] :is(.bzp-mark,.bzw-mark) svg{width:44%;height:44%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
[data-ui="board"] :is(.bzp-mark,.bzw-mark) img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}
/* a business without a Wall photo: its designed card (owner, Oct 28): the plate in the upper half, the logo whole on
   ivory or the initials in gold; the trade, name and line under it on the card's own ground, no fade needed */
[data-ui="board"] #lobby .bzw-card.bzw-pc{display:flex;flex-direction:column;gap:var(--b-s4);padding:56px 20px 20px;box-sizing:border-box;text-align:left;
  background:radial-gradient(120% 70% at 50% 0,color-mix(in srgb,var(--b-gold) 10%,transparent),transparent 70%),var(--b-surface)}
[data-ui="board"] .bzw-card.bzw-pc .bzw-pmark{flex:1 1 auto;width:auto;height:auto;min-height:72px;border-radius:var(--b-r-card);font-family:var(--b-serif);font-size:clamp(44px,16vw,72px);font-weight:600;letter-spacing:.04em}
[data-ui="board"] .bzw-card.bzw-pc .bzw-txt{position:static;flex:none}
[data-ui="board"] .bzw-card.bzw-pc .bzw-pmark.lplate img{padding:9%;mix-blend-mode:multiply}
[data-ui="board"] #lobby .bz-rail .bzw-card.bzw-pc .bzw-pmark{font-size:44px}
[data-ui="board"] :is(.bzp-mark,.bzw-mark).lplate{background:#f4efe3;border-color:color-mix(in srgb,var(--b-gold) 60%,transparent)}
[data-ui="board"] :is(.bzp-mark,.bzw-mark).lplate img{object-fit:contain;padding:12%;box-sizing:border-box;mix-blend-mode:multiply}
[data-ui="board"] .bzw-mark{grid-area:m;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;overflow:hidden;background:var(--b-surface-2);border:1px solid var(--b-hair-gold);color:var(--b-gold-text)}
[data-ui="board"] .bzw-mark.ic{border-radius:50%;background:var(--b-gold-fill)}
[data-ui="board"] .bzp-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
[data-ui="board"] .bzp-shade{position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(180deg,transparent 0,color-mix(in srgb,var(--b-bg) 60%,transparent) 50%,color-mix(in srgb,var(--b-bg) 90%,transparent) 100%)}
[data-ui="board"] .bzp-chip{position:absolute;top:20px;left:20px;z-index:2;padding:5px 11px;border-radius:var(--b-r-pill);background:var(--b-gold-text);color:var(--b-bg);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
[data-ui="board"] .bzp-demo{position:absolute;top:20px;right:20px;z-index:2}
[data-ui="board"] .bzp-snd{position:absolute;right:18px;bottom:18px;z-index:3;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--b-hair-gold);background:color-mix(in srgb,var(--b-bg) 70%,transparent);color:var(--b-gold-text);display:grid;place-items:center;cursor:pointer}
[data-ui="board"] .bzp-snd svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[data-ui="board"] .bzp-snd:focus-visible{outline:2px solid var(--b-gold);outline-offset:2px}
[data-ui="board"] .bzp-hero:has(.bzp-snd) .bzp-t{right:76px}
[data-ui="board"] .bzp-t{position:absolute;left:24px;right:24px;bottom:24px;z-index:2;display:grid;gap:6px}
[data-ui="board"] .bzp-t b{font-family:var(--b-serif);font-size:34px;font-weight:600;line-height:1.04;color:var(--b-text);text-wrap:balance;overflow-wrap:anywhere;text-shadow:0 1px 6px var(--b-bg)}
[data-ui="board"] .bzp-t span{font-size:var(--b-t-11);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--b-gold-text);text-shadow:0 1px 4px var(--b-bg)}
[data-ui="board"] .bzp-proof{display:flex;justify-content:center;gap:var(--b-s4);padding:var(--b-s3) 0;margin:0 0 var(--b-s4);border-block:1px solid var(--b-hair-gold);
  font-size:var(--b-t-11);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--b-gold-text)}
[data-ui="board"] .bzp-perk{display:grid;gap:6px;padding:var(--b-s4);margin:0 0 var(--b-s5);border-radius:var(--b-r-card);background:var(--b-gold-fill);border:1px solid var(--b-hair-gold)}
[data-ui="board"] .bzp-perk-k,[data-ui="board"] .bzp-k{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--b-gold-text)}
[data-ui="board"] .bzp-perk p{margin:0;font-size:var(--b-t-15);line-height:1.4;color:var(--b-text);overflow-wrap:anywhere}
[data-ui="board"] .bzp-sec{display:grid;gap:var(--b-s3);margin:0 0 var(--b-s5);min-width:0}
[data-ui="board"] .bzp-chips{display:flex;flex-wrap:wrap;gap:var(--b-s2)}
[data-ui="board"] .bzp-chips span{padding:6px 12px;border-radius:var(--b-r-pill);border:1px solid var(--b-hair);background:var(--b-surface);font-size:var(--b-t-13);color:var(--b-text);overflow-wrap:anywhere}
[data-ui="board"] .bzp-work{display:flex;gap:var(--b-s3);overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;padding-bottom:2px}
[data-ui="board"] .bzp-work::-webkit-scrollbar{display:none}
[data-ui="board"] .bzp-w{position:relative;flex:0 0 136px;aspect-ratio:9 / 16;padding:0;border:1px solid var(--b-hair-gold);border-radius:var(--b-r-plate);overflow:hidden;background:var(--b-surface);cursor:pointer;scroll-snap-align:start}
[data-ui="board"] .bzp-w img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
[data-ui="board"] .bzp-w:focus-visible{outline:2px solid var(--b-gold);outline-offset:2px}
[data-ui="board"] .bzp-cap{position:absolute;left:0;right:0;bottom:0;padding:28px 10px 10px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--b-bg) 85%,transparent));
  font-size:12px;line-height:1.3;color:var(--b-text);text-align:left;overflow-wrap:anywhere}
[data-ui="board"] .bzp-play{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--b-bg) 65%,transparent)}
[data-ui="board"] .bzp-play::after{content:"";position:absolute;left:11px;top:8px;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent var(--b-gold-text)}
[data-ui="board"] .bzp-act{display:grid;gap:var(--b-s2);justify-items:center;margin:var(--b-s2) 0 var(--b-s5)}
[data-ui="board"] .bzp-act .bzp-cta{width:100%}
[data-ui="board"] .bzp-fine{font-size:12px;color:var(--b-text-2);text-align:center}
.bzp-view{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;align-content:center;gap:12px;padding:max(16px,env(safe-area-inset-top,0px)) 16px max(16px,env(safe-area-inset-bottom,0px));background:color-mix(in srgb,#00050c 94%,transparent)}
.bzp-view :is(img,video){max-width:100%;max-height:78vh;border-radius:12px;display:block}
.bzp-view p{margin:0;max-width:36em;color:#f5f6f3;font-size:14px;text-align:center}
.bzp-x{position:absolute;top:max(12px,env(safe-area-inset-top,0px));right:12px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(217,166,81,.3);background:#0b1620;color:#f5f6f3;font-size:24px;line-height:1}

/* joining: three steps with the page building live under them */
[data-ui="board"] .bzj{display:grid;gap:var(--b-s3)}
[data-ui="board"] .bzj-steps{display:flex;gap:6px}
[data-ui="board"] .bzj-steps i{flex:1;height:3px;border-radius:2px;background:var(--b-hair)}
[data-ui="board"] .bzj-steps i.on{background:var(--b-gold)}
[data-ui="board"] .bzj-h{margin:0;font-family:var(--b-serif);font-size:var(--b-t-28);font-weight:600;line-height:1.1}
[data-ui="board"] .bzj-sub{margin:0;font-size:var(--b-t-14);color:var(--b-text-2)}
[data-ui="board"] .bzj-row{display:flex;align-items:center;justify-content:space-between;gap:var(--b-s3);padding:var(--b-s3);border:1px solid var(--b-hair);border-radius:var(--b-r-plate);background:var(--b-surface)}
[data-ui="board"] .bzj-row>div{display:grid;gap:2px;min-width:0}
[data-ui="board"] :is(.bzj-row,.bzj-sec) small{font-size:var(--b-t-13);color:var(--b-text-2)}
[data-ui="board"] .bzj-row .btn{flex:none}
[data-ui="board"] .bzj-sec{display:grid;gap:6px}
[data-ui="board"] .bzj-sec p{margin:0;font-size:var(--b-t-14);color:var(--b-text-2)}
[data-ui="board"] .bzj-live{display:grid;gap:var(--b-s2)}
[data-ui="board"] .bzj-live .bzp-hero{max-height:380px;margin:0}
[data-ui="board"] .bzj-k{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--b-gold-text)}
[data-ui="board"] .bzj-note{font-size:var(--b-t-13);color:var(--b-text-2)}
[data-ui="board"] .bzj-work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--b-s2)}
[data-ui="board"] .bzj-w{position:relative;aspect-ratio:9 / 16;border-radius:var(--b-r-chip);overflow:hidden;background:var(--b-surface);border:1px solid var(--b-hair)}
[data-ui="board"] .bzj-w img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
[data-ui="board"] .bzj-w span{position:absolute;left:0;right:0;bottom:0;padding:16px 6px 6px;font-size:11px;line-height:1.25;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--b-bg) 85%,transparent));overflow-wrap:anywhere}
[data-ui="board"] .bzj-wx{position:absolute;top:4px;right:4px;width:28px;height:28px;border-radius:50%;border:0;background:color-mix(in srgb,var(--b-bg) 70%,transparent);color:var(--b-text);font-size:18px;line-height:1}
[data-ui="board"] .bzj-add{display:flex;gap:var(--b-s2);align-items:center}
[data-ui="board"] .bzj-add input{flex:1;min-width:0}
[data-ui="board"] .bzj-status{margin:0;font-size:var(--b-t-13);color:var(--b-gold-text)}
[data-ui="board"] .bzj-status:empty{display:none}
/* (the clip being prepared: on screen but out of sight, since Safari decodes only a video it can see) */
.bzj-hold{position:fixed;left:0;bottom:0;width:2px;height:2px;overflow:hidden;opacity:.01;pointer-events:none}
.bzj-hold video{width:2px;height:2px}
/* "Who sees what in the Club feed" (Issue #42 P2): the once-only sheet, and the same text in Profile, What members see */
[data-ui="board"] .cf-told p,[data-ui="board"] .cf-told-in p{margin:var(--b-s2) 0 0;color:var(--b-text-2);font-size:var(--b-t-14);line-height:1.5}
[data-ui="board"] .cf-told-in{margin-top:var(--b-s3);padding-top:var(--b-s3);border-top:1px solid var(--b-hair-gold)}
[data-ui="board"] .cf-told-in h2{font-size:var(--b-t-15);margin:0}

/* notifications (Issue #42 P3): the member's sections, the director's delivery counts */
#modalRoot .cf-nf-list{display:grid;gap:0;margin:var(--b-s3) 0 0;border-top:1px solid var(--b-hair)}
#modalRoot .cf-nf-row{display:flex;align-items:center;justify-content:space-between;gap:var(--b-s3);padding:12px 0;border-bottom:1px solid var(--b-hair);cursor:pointer}
#modalRoot .cf-nf-row span{display:grid;gap:2px;min-width:0}
#modalRoot .cf-nf-row small{font-size:12px;color:var(--b-text-2)}
#modalRoot .cf-nf-row input{appearance:none;-webkit-appearance:none;flex:none;width:46px;height:28px;margin:0;border-radius:14px;background:var(--b-surface-2);border:1px solid var(--b-hair);position:relative;transition:background .15s}
#modalRoot .cf-nf-row input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--b-text-2);transition:transform .15s}
#modalRoot .cf-nf-row input:checked{background:var(--b-gold);border-color:var(--b-gold)}
#modalRoot .cf-nf-row input:checked::after{transform:translateX(18px);background:var(--b-raise-label)}
#modalRoot .cf-nf-row input:focus-visible{outline:2px solid var(--b-gold);outline-offset:2px}
#modalRoot .cf-nf-off{color:var(--b-gold-text)}
#modalRoot .cf-fun-t{width:100%;border-collapse:collapse;margin:var(--b-s3) 0;font-size:14px}
#modalRoot .cf-fun-t :is(th,td){padding:9px 0;border-bottom:1px solid var(--b-hair);text-align:right;vertical-align:top}
#modalRoot .cf-fun-t thead th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--b-text-2);font-weight:600}
#modalRoot .cf-fun-t :is(thead th:first-child,tbody th){text-align:left;font-weight:600}
#modalRoot .cf-fun-t tbody th small{display:block;font-weight:400;font-size:12px;color:var(--b-text-2)}
#modalRoot .cf-fun-t td{width:64px;color:var(--b-gold-text);font-variant-numeric:tabular-nums}
/* a post whose photo or video did not load: only its author sees it, as a quiet note with Remove (owner, Oct 27) */
[data-ui="board"] .cf .cf-card.cf-gone{aspect-ratio:auto;display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:0}
[data-ui="board"] .cf .cf-gone p{flex:1;min-width:0;margin:0;display:grid;gap:2px;color:var(--b-text);font-size:var(--b-t-14)}
[data-ui="board"] .cf .cf-gone p small{color:var(--b-text-2);font-size:var(--b-t-13)}
[data-ui="board"] .cf .cf-gone .cf-link{flex:none;min-height:var(--b-tap);border:0;background:none;color:var(--b-gold-text);font-weight:600;cursor:pointer}
/* Home's Exchange rail with the feed on: the Wall's photo cards, a few to a screen (owner, Oct 27) */
[data-ui="board"] #lobby .bz-rail.bzw-home .bzw-card{flex:0 0 min(220px,60%);width:auto;scroll-snap-align:start}
[data-ui="board"] #lobby .bz-rail.bzw-home .bz-vcard.add{flex:0 0 min(220px,60%)}
/* (owner, Oct 31: at the rail's 220 px the name in large type covered the member's face) the photo on top, whole, and the
   words under it on the card's own ground, never over the picture */
[data-ui="board"] #lobby .bz-rail.bzw-home .bzw-card:not(.bzw-pc){display:flex;flex-direction:column;aspect-ratio:auto}
[data-ui="board"] #lobby .bz-rail.bzw-home .bzw-card:not(.bzw-pc) .bzw-img{position:static;flex:none;height:auto;aspect-ratio:1 / 1}
[data-ui="board"] #lobby .bz-rail.bzw-home .bzw-card:not(.bzw-pc) .bzw-fade{display:none}
[data-ui="board"] #lobby .bz-rail.bzw-home .bzw-card:not(.bzw-pc) .bzw-txt{position:static;flex:1 1 auto;display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:12px 14px 14px;background:var(--b-surface)}
[data-ui="board"] #lobby .bz-rail.bzw-home .bzw-card:not(.bzw-pc) .bzw-name{font-size:var(--b-t-20);line-height:1.15;text-shadow:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
[data-ui="board"] #lobby .bz-rail.bzw-home .bzw-card:not(.bzw-pc) .bzw-line{-webkit-line-clamp:1;text-shadow:none}
[data-ui="board"] #lobby .bz-rail.bzw-home .bzw-card:not(.bzw-pc) .bzw-kicker,[data-ui="board"] #lobby .bz-rail.bzw-home .bzw-card:not(.bzw-pc) .bzw-go{text-shadow:none}
[data-ui="board"] #lobby .bz-rail.bzw-home .bzw-card:not(.bzw-pc) .bzw-go{margin-top:auto;padding-top:4px;align-self:flex-start}
/* (Muse, Oct 28: older businesses looked bad) a logo is never cropped, wherever it is; a business with no photo and no logo
   shows its own initials in serif on a gold-ringed navy tile, not a generic trade icon; the page's no-photo title card gives
   the logo real size */
[data-ui="board"] :is(.bzp-mark,.bzw-mark) img{object-fit:contain}
[data-ui="board"] :is(.bzp-mark,.bzw-mark).mono{border-radius:50%;background:radial-gradient(90% 90% at 50% 20%,color-mix(in srgb,var(--b-gold) 14%,transparent),transparent 70%),var(--b-surface);
  border:1px solid var(--b-hair-gold);box-shadow:inset 0 0 0 3px var(--b-surface),inset 0 0 0 4px var(--b-gold-line);color:var(--b-gold-text);font-family:var(--b-serif);font-weight:600;letter-spacing:.04em}
[data-ui="board"] .bzw-mark.mono{font-size:16px}
[data-ui="board"] .bzp-mark.mono{width:clamp(88px,28vw,132px);height:clamp(88px,28vw,132px);font-size:clamp(32px,10vw,46px)}
[data-ui="board"] .bzp-hero.bare .bzp-mark:not(.mono){width:min(200px,56%);height:auto;aspect-ratio:1;border-radius:28px}
[data-ui="board"] .bzp-hero.bare .bzp-mark:not(.mono):not(.lplate) img{padding:10%;box-sizing:border-box}
/* a cover that is a logo or flat graphic: whole, on its own colour, above the text */
[data-ui="board"] :is(.bzw-card,.bzp-hero).gfx{background:var(--gfx-bg,var(--b-surface))}
[data-ui="board"] .bzw-card.gfx .bzw-img,[data-ui="board"] .bzp-hero.gfx .bzp-media{inset:9% 10% auto;height:52%;width:80%;object-fit:contain;object-position:50% 50%}
[data-ui="board"] .bzw-card.gfx .bzw-fade,[data-ui="board"] .bzp-hero.gfx .bzp-shade{height:42%;background:linear-gradient(180deg,transparent 0,var(--b-bg) 38%)}
[data-ui="board"] .bzp-about{margin:0;font-size:var(--b-t-15,15px);line-height:1.55;color:var(--b-text);white-space:pre-line;overflow-wrap:anywhere}
/* the member's website and social links (owner, Oct 28, option A): a gold frame and icon and a ↗, so they read as live
   links that open outside the app, not as the dimmed "Not taking introductions" box; solid gold stays the page's main act */
[data-ui="board"] .bzp-links .bz-act{background:var(--b-gold-fill);border-color:var(--b-gold);color:var(--b-gold-text)}
[data-ui="board"] .bzp-links .bz-act :is(svg,.bz-ic){color:var(--b-gold)}
[data-ui="board"] .bzp-links .bz-act::after{content:'↗';content:'↗' / '';color:var(--b-gold);font-weight:700}
/* ---------- the magazine Exchange (owner's council ruling, Oct 29, Issue #42: option C cards, C hero + A below) ---------- */
/* the card: the trade and area, the serif name and the member's own quote over the media; a footer line under them */
[data-ui="board"] #lobby .bzw-mag .bzw-txt{bottom:64px}
[data-ui="board"] .bzw-quote{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--b-serif);font-style:italic;font-size:18px;font-weight:500;line-height:1.3;color:var(--b-gold-text);text-shadow:0 1px 4px var(--b-bg);quotes:"\201C" "\201D"}
[data-ui="board"] .bzw-foot{position:absolute;left:20px;right:20px;bottom:16px;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:var(--b-s2);padding-top:12px;border-top:1px solid var(--b-gold-line)}
[data-ui="board"] .bzw-area{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--b-t-13);color:var(--b-text);opacity:.86;text-shadow:0 1px 4px var(--b-bg)}
[data-ui="board"] .bzw-intro{flex:none;padding:6px 14px;border-radius:var(--b-r-pill);background:var(--b-gold);color:var(--b-bg);font-size:var(--b-t-13);font-weight:700}
[data-ui="board"] #lobby .bzw-mag.bzw-pc{padding-bottom:72px}
[data-ui="board"] .bzw-mag.bzw-pc .bzw-foot{text-shadow:none}
[data-ui="board"] .bzw-vid{background:var(--b-surface)}
/* a phone that will not start the video by itself: a play mark on the poster, tapped to start it */
[data-ui="board"] .bzw-tap{display:none;position:absolute;top:50%;left:50%;z-index:2;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;border:1px solid var(--b-hair-gold);background:color-mix(in srgb,var(--b-bg) 70%,transparent)}
[data-ui="board"] .bzw-tap::after{content:"";position:absolute;left:22px;top:17px;border-style:solid;border-width:11px 0 11px 17px;border-color:transparent transparent transparent var(--b-gold-text)}
[data-ui="board"] .bzw-card.wants-tap .bzw-tap{display:block}
/* the page: the hero alone, then its words on the page's own ground */
[data-ui="board"] .bzp-hero.on-page.bare{aspect-ratio:4 / 5;max-height:72vh;padding:24px}
[data-ui="board"] .bzp-hero.on-page.bare .bzp-mark{width:min(64%,260px);height:auto;aspect-ratio:1;border-radius:var(--b-r-card);font-family:var(--b-serif);font-size:clamp(56px,20vw,96px);font-weight:600;letter-spacing:.04em}
[data-ui="board"] .bzp-txt{display:grid;gap:var(--b-s3);margin-bottom:var(--b-s4)}
[data-ui="board"] .bzp-kick{font-size:var(--b-t-11);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--b-gold-text)}
[data-ui="board"] .bzp-name{margin:0;font-family:var(--b-serif);font-size:36px;font-weight:600;line-height:1.04;text-wrap:balance;overflow-wrap:anywhere}
[data-ui="board"] .bzp-quote{margin:0;padding-left:14px;border-left:2px solid var(--b-gold);font-family:var(--b-serif);font-style:italic;font-size:20px;font-weight:500;line-height:1.35;color:var(--b-gold-text)}
[data-ui="board"] .bzp-txt .bzp-about{margin:0;color:var(--b-text-2)}
[data-ui="board"] .bzp-meta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px var(--b-s3);margin:0;font-size:var(--b-t-14)}
[data-ui="board"] .bzp-meta dt{color:var(--b-text-2)}
[data-ui="board"] .bzp-meta dd{margin:0;overflow-wrap:anywhere}
[data-ui="board"] .bzp-links{margin:var(--b-s3) 0}
[data-ui="board"] .bzp-hls{display:flex;gap:var(--b-s4);margin:var(--b-s2) 0 var(--b-s3)}
[data-ui="board"] .bzp-hl{display:grid;justify-items:center;gap:6px;padding:0;border:0;background:none;color:var(--b-text-2);font:inherit;font-size:var(--b-t-12,12px);cursor:pointer;min-width:var(--b-tap)}
[data-ui="board"] .bzp-hl i{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;border:1px solid var(--b-gold);background:var(--hl,none) center / cover no-repeat,var(--b-surface);box-shadow:0 0 0 3px var(--b-bg) inset}
[data-ui="board"] .bzp-hl i.off{color:var(--b-gold-text)}
[data-ui="board"] .bzp-hl i svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6}
[data-ui="board"] .bzp-hl:focus-visible i,[data-ui="board"] .bzp-g:focus-visible{outline:2px solid var(--b-gold);outline-offset:2px}
[data-ui="board"] .bzp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin-bottom:var(--b-s4);border-radius:var(--b-r-card);overflow:hidden}
[data-ui="board"] .bzp-g{position:relative;display:block;aspect-ratio:1;padding:0;border:0;background:var(--b-surface);cursor:pointer;overflow:hidden}
[data-ui="board"] .bzp-g img{width:100%;height:100%;object-fit:cover;display:block}
[data-ui="board"] .bzp-vb{position:absolute;right:6px;bottom:6px;display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:var(--b-r-pill);background:color-mix(in srgb,var(--b-bg) 75%,transparent);color:var(--b-text);font-size:11px;font-weight:600}
[data-ui="board"] .bzp-vb::before{content:"";border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}
[data-ui="board"] #lobby .bzw-mag .bzw-fade{height:62%}
[data-ui="board"] .bzw-card.bzw-mag.gfx .bzw-img{inset:7% 12% auto;height:40%;width:76%}
[data-ui="board"] .bzw-card.bzw-mag.gfx .bzw-fade{height:56%}
/* (a logo-like cover on the page: nothing is written over the hero, so it is shown whole in the middle of the frame) */
[data-ui="board"] .bzp-hero.on-page.gfx .bzp-media{inset:10%;height:80%;width:80%}
[data-ui="board"] .bzp-hero.on-page .bzp-shade{display:none}
/* a business's club events on its page (public/business.js, owner decisions Oct 29) */
[data-ui="board"] .bzp-evs{display:flex;flex-direction:column;gap:var(--b-s2);margin-top:var(--b-s4)}
[data-ui="board"] .bzp-ev{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:var(--b-s3) var(--b-s4);border-radius:var(--b-r-card);border:1px solid var(--b-hair-gold);background:var(--b-surface);color:var(--b-text);text-align:left;font:inherit;cursor:pointer;min-width:0}
[data-ui="board"] .bzp-ev b{font-family:var(--b-serif);font-size:var(--b-t-20);font-weight:600;overflow-wrap:anywhere}
[data-ui="board"] .bzp-ev small{font-size:var(--b-t-13);color:var(--b-text-2);overflow-wrap:anywhere}