/* Barrel Broz Community — The Cellar (0.7.0).
   Frozen v5-1 design: one layout, every colour from a --bbmb-* token; Light (default) and
   Dark token sets live on .bbmb-shell only — the site header and footer never change.
   Loaded on /the-cellar/ pages only. Every selector is namespaced (.bbmb-*). */

/* =========================== TOKENS (v5-1, unchanged) =========================== */
.bbmb-shell {
  color-scheme: light;
  --bbmb-bg: #f7f7f2;
  --bbmb-panel: #ffffff;
  --bbmb-panel-2: #f0f0ea;
  --bbmb-text: #0a0a0a;
  --bbmb-text-2: #33332f;
  --bbmb-muted: #5d5d58;
  --bbmb-line: #dcdcd4;          /* quiet tile borders (decorative) */
  --bbmb-control: #767670;       /* field / control borders: 4.6:1 */
  --bbmb-strong: #0a0a0a;        /* hover + emphasis borders */
  --bbmb-accent: #ffd203;
  --bbmb-on-accent: #0a0a0a;
  --bbmb-num: #0a0a0a;
  --bbmb-hl-bg: #ffd203;  --bbmb-hl-text: #0a0a0a;
  --bbmb-link: #0a0a0a;   --bbmb-link-line: #ffd203;
  --bbmb-tab-text: #5d5d58; --bbmb-tab-on-bg: #ffd203; --bbmb-tab-on-text: #0a0a0a; --bbmb-tab-on-line: #0a0a0a; --bbmb-tab-rule: #0a0a0a;
  --bbmb-seg-bg: #ffffff; --bbmb-seg-text: #0a0a0a; --bbmb-seg-on-bg: #0a0a0a; --bbmb-seg-on-text: #ffd203; --bbmb-seg-border: #0a0a0a;
  --bbmb-hot-bg: #ffd203; --bbmb-hot-border: #0a0a0a; --bbmb-hot-num: #0a0a0a; --bbmb-hot-label: #0a0a0a;
  --bbmb-unread-bg: #fffbe0; --bbmb-unread-bar: #0a0a0a; --bbmb-dot: #ffd203; --bbmb-dot-ring: #0a0a0a;
  --bbmb-hover-bg: #f0f0ea;
  --bbmb-pressed-bg: #ffd203; --bbmb-pressed-text: #0a0a0a;
  --bbmb-focus: #0a0a0a; --bbmb-focus-halo: #ffd203;
  --bbmb-field-bg: #ffffff; --bbmb-field-fill: #f0f0ea;
  --bbmb-btn-bg: #ffffff; --bbmb-btn-border: #0a0a0a; --bbmb-btn-text: #0a0a0a;
  --bbmb-btn-hover-bg: #ffd203; --bbmb-btn-hover-border: #0a0a0a; --bbmb-btn-hover-text: #0a0a0a;
  --bbmb-pri-bg: #ffd203; --bbmb-pri-border: #0a0a0a; --bbmb-pri-text: #0a0a0a;
  --bbmb-pri-hover-bg: #0a0a0a; --bbmb-pri-hover-text: #ffd203;
  --bbmb-disabled-bg: #ecece6; --bbmb-disabled-text: #6e6e68; --bbmb-disabled-border: #a9a9a1;
  --bbmb-tag-ok-bg: #0a0a0a; --bbmb-tag-ok-text: #ffd203; --bbmb-tag-ok-border: #0a0a0a;
  --bbmb-tag-bg: #ffffff; --bbmb-tag-text: #33332f; --bbmb-tag-border: #767670;
  --bbmb-card-bg: #0a0a0a; --bbmb-card-text: #f7f7f2; --bbmb-card-muted: #c9c9c1; --bbmb-card-badge-bg: #ffd203; --bbmb-card-badge-text: #0a0a0a;
  --bbmb-danger: #b3261e; --bbmb-danger-bg: #fff5f4; --bbmb-danger-border: #b3261e;
  --bbmb-danger-btn: #b3261e; --bbmb-on-danger: #ffffff;
  --bbmb-warn-bg: #ffd203; --bbmb-warn-text: #0a0a0a; --bbmb-warn-border: #0a0a0a;
  --bbmb-info-bg: #f0f0ea; --bbmb-info-text: #0a0a0a; --bbmb-info-border: #767670;
  --bbmb-ok-bg: #ffd203; --bbmb-ok-text: #0a0a0a;
  --bbmb-err-bg: #fff5f4; --bbmb-err-text: #b3261e;
  --bbmb-prompt-bg: #ffffff; --bbmb-prompt-border: #0a0a0a; --bbmb-prompt-stripe: #ffd203;
  --bbmb-bar-bg: #ffffff; --bbmb-bar-top: #0a0a0a; --bbmb-bar-text: #5d5d58; --bbmb-bar-on-text: #0a0a0a; --bbmb-bar-on-bg: #fffbe0; --bbmb-bar-on-line: #0a0a0a;
  --bbmb-flag-text: #5d5d58; --bbmb-flag-border: #767670;
}

/* =========================== TOKENS: DARK =========================== */
.bbmb-shell[data-bbmb-theme="dark"] {
  color-scheme: dark;
  --bbmb-bg: #0a0a0a;
  --bbmb-panel: #141414;
  --bbmb-panel-2: #1d1d1d;
  --bbmb-text: #f7f7f2;
  --bbmb-text-2: #d3d3cc;
  --bbmb-muted: #a3a39c;
  --bbmb-line: #2a2a2a;
  --bbmb-control: #8a8a84;       /* FIX: was #3a3a3a (1.7:1) → 5.6:1 on fields */
  --bbmb-strong: #ffd203;
  --bbmb-accent: #ffd203;
  --bbmb-on-accent: #0a0a0a;
  --bbmb-num: #ffd203;
  --bbmb-hl-bg: transparent; --bbmb-hl-text: #ffd203;
  --bbmb-link: #ffd203;   --bbmb-link-line: transparent;
  --bbmb-tab-text: #a3a39c; --bbmb-tab-on-bg: transparent; --bbmb-tab-on-text: #ffd203; --bbmb-tab-on-line: #ffd203; --bbmb-tab-rule: #2a2a2a;
  --bbmb-seg-bg: #141414; --bbmb-seg-text: #f7f7f2; --bbmb-seg-on-bg: #ffd203; --bbmb-seg-on-text: #0a0a0a; --bbmb-seg-border: #8a8a84;
  --bbmb-hot-bg: #1a1808; --bbmb-hot-border: #ffd203; --bbmb-hot-num: #ffd203; --bbmb-hot-label: #f7f7f2;
  --bbmb-unread-bg: #1c1a0c; --bbmb-unread-bar: #ffd203; --bbmb-dot: #ffd203; --bbmb-dot-ring: #0a0a0a;
  --bbmb-hover-bg: #1d1d1d;
  --bbmb-pressed-bg: #2a2610; --bbmb-pressed-text: #ffd203;
  --bbmb-focus: #ffd203; --bbmb-focus-halo: #0a0a0a;
  --bbmb-field-bg: #0d0d0d; --bbmb-field-fill: #1d1d1d;
  --bbmb-btn-bg: transparent; --bbmb-btn-border: #8a8a84; --bbmb-btn-text: #f7f7f2;
  --bbmb-btn-hover-bg: #1d1d1d; --bbmb-btn-hover-border: #ffd203; --bbmb-btn-hover-text: #ffd203;
  --bbmb-pri-bg: #ffd203; --bbmb-pri-border: #ffd203; --bbmb-pri-text: #0a0a0a;
  --bbmb-pri-hover-bg: #f7f7f2; --bbmb-pri-hover-text: #0a0a0a;
  --bbmb-disabled-bg: #1d1d1d; --bbmb-disabled-text: #8a8a84; --bbmb-disabled-border: #4a4a46;
  --bbmb-tag-ok-bg: transparent; --bbmb-tag-ok-text: #ffd203; --bbmb-tag-ok-border: #ffd203;
  --bbmb-tag-bg: transparent; --bbmb-tag-text: #c9c9c1; --bbmb-tag-border: #8a8a84;
  --bbmb-card-bg: #f7f7f2; --bbmb-card-text: #0a0a0a; --bbmb-card-muted: #33332f; --bbmb-card-badge-bg: #0a0a0a; --bbmb-card-badge-text: #ffd203;
  --bbmb-danger: #ff8a80;        /* 8.4:1 on the danger panel */
  --bbmb-danger-bg: #170d0c; --bbmb-danger-border: #ff8a80;
  --bbmb-danger-btn: #c62828;    /* FIX: was #e5484d with white (3.9:1) → 5.6:1 */
  --bbmb-on-danger: #ffffff;
  --bbmb-warn-bg: #ffd203; --bbmb-warn-text: #0a0a0a; --bbmb-warn-border: #ffd203;
  --bbmb-info-bg: #1d1d1d; --bbmb-info-text: #f7f7f2; --bbmb-info-border: #8a8a84;
  --bbmb-ok-bg: #ffd203; --bbmb-ok-text: #0a0a0a;
  --bbmb-err-bg: #170d0c; --bbmb-err-text: #ff8a80;
  --bbmb-prompt-bg: #141414; --bbmb-prompt-border: #ffd203; --bbmb-prompt-stripe: #ffd203;
  --bbmb-bar-bg: #0d0d0d; --bbmb-bar-top: #2a2a2a; --bbmb-bar-text: #a3a39c; --bbmb-bar-on-text: #ffd203; --bbmb-bar-on-bg: transparent; --bbmb-bar-on-line: #ffd203;
  --bbmb-flag-text: #a3a39c; --bbmb-flag-border: #8a8a84;
}

/* =========================== PAGE CONTAINER =========================== */
.bbmb-page { container: bbmbpage / inline-size; position: relative; --font-display: "Anton", Impact, "Arial Narrow Bold", sans-serif; --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Space Mono", ui-monospace, Menlo, monospace; font-family: var(--font-body); }
.bbmb-page *, .bbmb-page *::before, .bbmb-page *::after { box-sizing: border-box; }
.bbmb-page p, .bbmb-page ul, .bbmb-page dl, .bbmb-page fieldset { margin-top: 0; }
.bbmb-page fieldset { border: 0; padding: 0; min-width: 0; }
.bbmb-page form { margin: 0; }
.bbmb-inline { display: inline-flex; }

/* =========================== LAYOUT (token-only below this line) =========================== */
/* form-control reset inside The Cellar only (Astra styles bare inputs/buttons globally) */
.bbmb-page input.bbmb-inp, .bbmb-page button, .bbmb-page .bbmb-btn { border-radius: 0; box-shadow: none; text-shadow: none; line-height: 1; }
.bbmb-page input.bbmb-inp { margin: 0; max-width: 100%; }
.bbmb-page .bbmb-shell { background: var(--bbmb-bg); color: var(--bbmb-text); width: 100%; transition: background-color .2s, color .2s; font-family: var(--font-body); min-height: 70vh; }
.bbmb-page .bbmb-shell *:focus-visible, .bbmb-page .bbmb-shell .is-focus { outline: 3px solid var(--bbmb-focus); outline-offset: 3px; box-shadow: 0 0 0 6px var(--bbmb-focus-halo); }
.bbmb-page .bbmb-shell .i { width: 20px; height: 20px; flex: none; }
.bbmb-page .bbmb-in { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.bbmb-page .bbmb-band { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-top: 26px; }
.bbmb-page .bbmb-band h1 { font: 48px/.95 var(--font-display); text-transform: uppercase; margin: 0; letter-spacing: .01em; }
.bbmb-page .bbmb-band h1 .hl { background: var(--bbmb-hl-bg); color: var(--bbmb-hl-text); padding: 0 6px; }
.bbmb-page .bbmb-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.bbmb-page .bbmb-who b { display: block; font: 700 16px/1.3 var(--font-body); }
.bbmb-page .bbmb-who span { font: 400 12px/1.5 var(--font-mono); color: var(--bbmb-muted); text-transform: uppercase; letter-spacing: .06em; }

/* quick appearance control + segmented control (same component in Preferences) */
.bbmb-page .bbmb-appear { display: flex; align-items: center; gap: 8px; }
.bbmb-page .bbmb-appear .lbl { font: 700 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bbmb-muted); }
.bbmb-page .bbmb-seg { display: inline-flex; border: 2px solid var(--bbmb-seg-border); }
.bbmb-page .bbmb-seg button { height: 30px; padding: 0 12px; border: 0; background: var(--bbmb-seg-bg); color: var(--bbmb-seg-text); font: 700 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.bbmb-page .bbmb-seg button + button { border-left: 2px solid var(--bbmb-seg-border); }
.bbmb-page .bbmb-seg button .i { width: 14px; height: 14px; }
.bbmb-page .bbmb-seg button[aria-pressed="true"] { background: var(--bbmb-seg-on-bg); color: var(--bbmb-seg-on-text); }
.bbmb-page .bbmb-seg button:not([aria-pressed="true"]):hover { background: var(--bbmb-hover-bg); }
.bbmb-page .bbmb-seg.big button { height: 46px; padding: 0 22px; font-size: 13px; }
.bbmb-page .bbmb-seg[aria-disabled="true"] button { cursor: not-allowed; }

/* tabs (desktop) */
.bbmb-page .bbmb-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--bbmb-tab-rule); margin-top: 22px; }
.bbmb-page .bbmb-tabs a { display: flex; align-items: center; gap: 8px; height: 54px; padding: 0 16px; text-decoration: none; color: var(--bbmb-tab-text); font: 700 13px/1 var(--font-body); text-transform: uppercase; letter-spacing: .06em; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.bbmb-page .bbmb-tabs a .i { width: 18px; height: 18px; }
.bbmb-page .bbmb-tabs a:hover, .bbmb-page .bbmb-tabs a.is-hover { color: var(--bbmb-text); background: var(--bbmb-hover-bg); }
.bbmb-page .bbmb-tabs a[aria-current="page"] { color: var(--bbmb-tab-on-text); background: var(--bbmb-tab-on-bg); border-bottom-color: var(--bbmb-tab-on-line); }
.bbmb-page .bbmb-tabs .sp { flex: 1; }
/* 0.12.2 (P4-133): the frozen v5.1 unread count on the Notifications tab (cellar-v5.css .bbmb-tabs .ct; hidden at 0 by the markup) */
.bbmb-page .bbmb-tabs .ct { background: var(--bbmb-accent); color: var(--bbmb-on-accent); font: 700 11px/1 var(--font-mono); padding: 4px 6px; outline: 1px solid var(--bbmb-strong); white-space: nowrap; }
.bbmb-page .bbmb-main { padding-top: 28px; padding-bottom: 90px; }
.bbmb-page .bbmb-sec-h { margin-bottom: 20px; }
.bbmb-page .bbmb-sec-h h2 { font: 34px/1 var(--font-display); text-transform: uppercase; margin: 0; }
.bbmb-page .bbmb-sec-h p { margin: 6px 0 0; color: var(--bbmb-muted); font: 400 15px/1.5 var(--font-body); }
.bbmb-page .bbmb-back { display: none; }

.bbmb-page .bbmb-panel { background: var(--bbmb-panel); border: 2px solid var(--bbmb-line); padding: 20px 22px; margin-bottom: 18px; transition: border-color .15s, transform .15s; }
.bbmb-page .bbmb-tile:hover, .bbmb-page .bbmb-tile.is-hover { border-color: var(--bbmb-strong); transform: translateY(-2px); }
.bbmb-page .bbmb-h3 { font: 700 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--bbmb-muted); margin: 0 0 16px; display: flex; align-items: center; gap: 8px; }
.bbmb-page .bbmb-h3::before { content: ""; width: 10px; height: 10px; background: var(--bbmb-accent); outline: 1px solid var(--bbmb-strong); }
.bbmb-page .bbmb-h3 a { margin-left: auto; color: var(--bbmb-link); text-decoration: none; border-bottom: 2px solid var(--bbmb-link-line); }
.bbmb-page .bbmb-help { font: 400 14px/1.55 var(--font-body); color: var(--bbmb-text-2); margin: 0 0 14px; }
.bbmb-page .bbmb-fine { display: flex; gap: 8px; align-items: flex-start; font: 400 12px/1.5 var(--font-mono); color: var(--bbmb-muted); margin: 14px 0 0; }
.bbmb-page .bbmb-fine .i { width: 16px; height: 16px; margin-top: 1px; }
.bbmb-page .bbmb-rule { display: flex; gap: 8px; align-items: flex-start; font: 600 14px/1.45 var(--font-body); margin: 10px 0 14px; }
.bbmb-page .bbmb-rule .i { width: 18px; height: 18px; margin-top: 1px; }
.bbmb-page .bbmb-flag { display: inline-flex; align-items: center; gap: 6px; font: 700 10px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bbmb-flag-text); border: 1.5px dashed var(--bbmb-flag-border); padding: 4px 7px; margin: 0 0 12px; }
.bbmb-page .bbmb-lbl { display: block; font: 700 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 6px; color: var(--bbmb-muted); }
.bbmb-page .bbmb-lbl .nt { text-transform: none; letter-spacing: .02em; }
.bbmb-page .bbmb-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
/* buttons */
.bbmb-page .bbmb-btn { height: 44px; padding: 0 16px; border: 2px solid var(--bbmb-btn-border); background: var(--bbmb-btn-bg); color: var(--bbmb-btn-text); font: 800 12px/1 var(--font-body); text-transform: uppercase; letter-spacing: .08em; display: inline-flex; gap: 8px; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; }
.bbmb-page .bbmb-btn .i { width: 16px; height: 16px; }
.bbmb-page .bbmb-btn:hover, .bbmb-page .bbmb-btn.is-hover { background: var(--bbmb-btn-hover-bg); border-color: var(--bbmb-btn-hover-border); color: var(--bbmb-btn-hover-text); }
.bbmb-page .bbmb-btn:active, .bbmb-page .bbmb-btn.is-pressed { background: var(--bbmb-pressed-bg); color: var(--bbmb-pressed-text); transform: translateY(1px); }
.bbmb-page .bbmb-btn.pri { background: var(--bbmb-pri-bg); border-color: var(--bbmb-pri-border); color: var(--bbmb-pri-text); }
.bbmb-page .bbmb-btn.pri:hover, .bbmb-page .bbmb-btn.pri.is-hover { background: var(--bbmb-pri-hover-bg); color: var(--bbmb-pri-hover-text); }
.bbmb-page .bbmb-btn.danger { border-color: var(--bbmb-danger-border); color: var(--bbmb-danger); background: transparent; }
.bbmb-page .bbmb-btn.danger:hover, .bbmb-page .bbmb-btn.danger.is-hover { background: var(--bbmb-danger-btn); border-color: var(--bbmb-danger-btn); color: var(--bbmb-on-danger); }
.bbmb-page .bbmb-btn.final { background: var(--bbmb-danger-btn); border-color: var(--bbmb-danger-btn); color: var(--bbmb-on-danger); }
.bbmb-page .bbmb-btn[disabled], .bbmb-page .bbmb-btn[disabled]:hover { background: var(--bbmb-disabled-bg); color: var(--bbmb-disabled-text); border: 2px dashed var(--bbmb-disabled-border); cursor: not-allowed; transform: none; }
.bbmb-page .bbmb-link { background: none; border: 0; padding: 0; color: var(--bbmb-link); font: 700 12px/1 var(--font-body); text-transform: uppercase; letter-spacing: .06em; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; text-decoration: none; border-bottom: 2px solid var(--bbmb-link-line); }
.bbmb-page .bbmb-link .i { width: 16px; height: 16px; }

/* tags */
.bbmb-page .bbmb-tag { display: inline-flex; align-items: center; gap: 4px; font: 700 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; padding: 5px 7px; border: 1.5px solid var(--bbmb-tag-border); background: var(--bbmb-tag-bg); color: var(--bbmb-tag-text); white-space: nowrap; }
.bbmb-page .bbmb-tag .i { width: 12px; height: 12px; stroke-width: 3; }
.bbmb-page .bbmb-tag.ok { background: var(--bbmb-tag-ok-bg); color: var(--bbmb-tag-ok-text); border-color: var(--bbmb-tag-ok-border); }
.bbmb-page .bbmb-tag.left { background: var(--bbmb-accent); color: var(--bbmb-on-accent); border-color: var(--bbmb-strong); }
/* fields */
.bbmb-page .bbmb-fld { margin-bottom: 14px; }
.bbmb-page .bbmb-inp { width: 100%; height: 48px; border: 2px solid var(--bbmb-control); background: var(--bbmb-field-bg); color: var(--bbmb-text); padding: 0 14px; font: 500 16px/1 var(--font-body); }
.bbmb-page .bbmb-inp::placeholder { color: var(--bbmb-muted); }
.bbmb-page .bbmb-inp:focus, .bbmb-page .bbmb-inp.is-focus { outline: none; border-color: var(--bbmb-focus); box-shadow: 0 0 0 3px var(--bbmb-accent); }
.bbmb-page .bbmb-row { display: flex; }
.bbmb-page .bbmb-pre { height: 48px; border: 2px solid var(--bbmb-control); border-right: 0; padding: 0 12px; display: flex; align-items: center; font: 700 15px/1 var(--font-mono); background: var(--bbmb-field-fill); color: var(--bbmb-text); }
.bbmb-page .bbmb-avail { font: 700 12px/1.3 var(--font-mono); display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.bbmb-page .bbmb-avail .i { width: 16px; height: 16px; }
.bbmb-page .bbmb-avail.no { color: var(--bbmb-err-text); }
.bbmb-page .bbmb-msg { display: flex; gap: 8px; align-items: flex-start; font: 600 13px/1.45 var(--font-body); padding: 10px 12px; border: 2px solid var(--bbmb-info-border); background: var(--bbmb-info-bg); color: var(--bbmb-info-text); margin: 4px 0 14px; }
.bbmb-page .bbmb-msg .i { width: 18px; height: 18px; margin-top: 1px; }
.bbmb-page .bbmb-msg.warn { background: var(--bbmb-warn-bg); color: var(--bbmb-warn-text); border-color: var(--bbmb-warn-border); }
.bbmb-page .bbmb-msg.err { background: var(--bbmb-err-bg); color: var(--bbmb-err-text); border-color: var(--bbmb-danger-border); }
.bbmb-page .bbmb-msg a { color: inherit; }
/* toggles + chips */
.bbmb-page .bbmb-trow { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; }
.bbmb-page .bbmb-trow + .bbmb-trow { border-top: 1px solid var(--bbmb-line); }
.bbmb-page .bbmb-trow b { display: block; font: 700 15px/1.3 var(--font-body); }
.bbmb-page .bbmb-trow span { display: block; font: 400 13px/1.45 var(--font-body); color: var(--bbmb-muted); margin-top: 2px; }
.bbmb-page .bbmb-switch { width: 54px; height: 30px; border: 2px solid var(--bbmb-control); background: var(--bbmb-field-bg); position: relative; flex: none; padding: 0; cursor: pointer; }
.bbmb-page .bbmb-switch i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: var(--bbmb-control); transition: left .15s; }
.bbmb-page .bbmb-switch.on { background: var(--bbmb-accent); border-color: var(--bbmb-strong); }
.bbmb-page .bbmb-switch.on i { left: 27px; background: var(--bbmb-on-accent); }
.bbmb-page .bbmb-switch.on::after { content: "ON"; position: absolute; left: 6px; top: 7px; font: 700 9px/1 var(--font-mono); color: var(--bbmb-on-accent); }
.bbmb-page .bbmb-switch:not(.on)::after { content: "OFF"; position: absolute; right: 4px; top: 7px; font: 700 9px/1 var(--font-mono); color: var(--bbmb-muted); }
.bbmb-page .bbmb-switch[disabled] { border-style: dashed; cursor: not-allowed; opacity: .7; }
/* P3-A (0.8.0): the same v5.1 switch as a real checkbox (Step 3 Email Newsletter); unchanged look, theme tokens only */
.bbmb-page .bbmb-sw { position: relative; flex: none; display: inline-flex; }
.bbmb-page .bbmb-sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.bbmb-page .bbmb-sw input:disabled { cursor: not-allowed; }
.bbmb-page .bbmb-sw input:checked + .bbmb-switch { background: var(--bbmb-accent); border-color: var(--bbmb-strong); }
.bbmb-page .bbmb-sw input:checked + .bbmb-switch i { left: 27px; background: var(--bbmb-on-accent); }
.bbmb-page .bbmb-sw input:checked + .bbmb-switch::after { content: "ON"; left: 6px; right: auto; color: var(--bbmb-on-accent); }
.bbmb-page .bbmb-sw input:disabled + .bbmb-switch { border-style: dashed; opacity: .7; }
.bbmb-page .bbmb-sw input:focus-visible + .bbmb-switch { outline: 3px solid var(--bbmb-focus); outline-offset: 3px; box-shadow: 0 0 0 6px var(--bbmb-focus-halo); }
.bbmb-page .bbmb-row label { cursor: pointer; }
/* profile + account */
.bbmb-page .bbmb-kv { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.bbmb-page .bbmb-big { font: 30px/1.05 var(--font-display); }
.bbmb-page .bbmb-dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
.bbmb-page .bbmb-dl > div { padding: 12px 0; border-top: 1px solid var(--bbmb-line); }
.bbmb-page .bbmb-dl dt { font: 700 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; color: var(--bbmb-muted); }
.bbmb-page .bbmb-dl dd { margin: 0; font: 600 16px/1.4 var(--font-body); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; overflow-wrap: anywhere; }
.bbmb-page .bbmb-dl dd.none { color: var(--bbmb-muted); font-style: italic; font-weight: 500; }
.bbmb-page .bbmb-ident { margin-top: 18px; padding-top: 14px; border-top: 2px solid var(--bbmb-line); }
.bbmb-page .bbmb-ident-row { display: flex; gap: 10px; align-items: center; margin: 8px 0 10px; }
.bbmb-page .bbmb-av { width: 36px; height: 36px; background: var(--bbmb-accent); border: 2px solid var(--bbmb-strong); display: grid; place-items: center; font: 18px/1 var(--font-display); color: var(--bbmb-on-accent); flex: none; }
.bbmb-page .bbmb-ident-row b { display: block; font: 800 15px/1.2 var(--font-body); }
.bbmb-page .bbmb-details { margin-top: 14px; font: 400 13px/1.5 var(--font-body); color: var(--bbmb-text-2); }
.bbmb-page .bbmb-details summary { cursor: pointer; font: 700 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--bbmb-text); }
.bbmb-page .bbmb-details ul { margin: 8px 0 0; padding-left: 18px; }
.bbmb-page .bbmb-details code { font: 700 12px/1 var(--font-mono); background: var(--bbmb-panel-2); padding: 2px 4px; }
.bbmb-page .bbmb-contacts { list-style: none; margin: 0; padding: 0; }
.bbmb-page .bbmb-contacts li { display: flex; align-items: center; gap: 14px; padding: 14px 0; flex-wrap: wrap; }
.bbmb-page .bbmb-contacts li + li { border-top: 1px solid var(--bbmb-line); }
.bbmb-page .bbmb-contacts li > div { flex: 1; min-width: 160px; }
.bbmb-page .bbmb-contacts b { display: block; font: 700 17px/1.3 var(--font-body); overflow-wrap: anywhere; }
.bbmb-page .bbmb-contacts b.none { color: var(--bbmb-muted); font-weight: 500; font-style: italic; }
.bbmb-page .bbmb-cic { width: 42px; height: 42px; border: 2px solid var(--bbmb-strong); background: var(--bbmb-accent); color: var(--bbmb-on-accent); display: grid; place-items: center; flex: none; }
.bbmb-page .bbmb-cic.off { background: transparent; color: var(--bbmb-muted); border-style: dashed; border-color: var(--bbmb-control); }
.bbmb-page .bbmb-mcard { background: var(--bbmb-card-bg); color: var(--bbmb-card-text); padding: 18px; position: relative; }
.bbmb-page .bbmb-mcard .k { font: 700 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.bbmb-page .bbmb-mcard b { display: block; font: 40px/1 var(--font-display); margin: 12px 0 4px; }
.bbmb-page .bbmb-mcard .nm { font: 400 14px/1.3 var(--font-body); color: var(--bbmb-card-muted); }
.bbmb-page .bbmb-mcard .row { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.bbmb-page .bbmb-mcard .bbmb-tag { background: var(--bbmb-card-badge-bg); color: var(--bbmb-card-badge-text); border-color: var(--bbmb-card-badge-bg); }
.bbmb-page .bbmb-mcard::after { content: "BB"; position: absolute; right: 14px; top: 12px; width: 40px; height: 40px; border-radius: 50%; background: var(--bbmb-card-badge-bg); color: var(--bbmb-card-badge-text); font: 16px/40px var(--font-display); text-align: center; }
/* 0.15.0 (R3): a chosen avatar takes the "BB" badge's place (same spot and size); without one, "BB" stays. */
.bbmb-page .bbmb-mcard.has-av::after { content: none; }
.bbmb-page .bbmb-mcard .bbmb-mcard-av { position: absolute; right: 14px; top: 12px; width: 40px; height: 40px; line-height: 0; }
.bbmb-page .bbmb-shell [hidden] { display: none !important; }
.bbmb-page .bbmb-msg.ok { background: var(--bbmb-ok-bg); color: var(--bbmb-ok-text); border-color: var(--bbmb-strong); }
/* ---- welcome banner (first visit) ---- */
.bbmb-page .bbmb-welcome { background: var(--bbmb-card-bg); color: var(--bbmb-card-text); padding: 18px 20px; margin-bottom: 18px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.bbmb-page .bbmb-welcome b { font: 30px/1 var(--font-display); text-transform: uppercase; display: block; }
.bbmb-page .bbmb-welcome span { color: var(--bbmb-card-muted); font: 400 14px/1.45 var(--font-body); }
.bbmb-page .bbmb-welcome div { flex: 1; min-width: 220px; }
.bbmb-page .bbmb-savebar { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 2px solid var(--bbmb-strong); }
.bbmb-page .bbmb-savebar .sb-txt b { display: block; font: 22px/1.1 var(--font-display); text-transform: uppercase; }
.bbmb-page .bbmb-savebar .sb-txt span { color: var(--bbmb-text-2); font: 400 14px/1.45 var(--font-body); }
.bbmb-page .bbmb-inp.is-error { border-color: var(--bbmb-danger-border); }
@container bbmbpage (max-width: 599px) { .bbmb-savebar .bbmb-btn { flex: 1 1 100%; } }
/* leave-setup confirmation */
.bbmb-page .bbmb-shell.bbmb-leave { position: absolute; inset: 0; z-index: 80; background: rgba(10,10,10,.6); min-height: 0; }
.bbmb-page .bbmb-leave .card { position: sticky; top: 24px; margin: 120px auto 0; max-width: 460px; width: calc(100% - 32px); background: var(--bbmb-panel); color: var(--bbmb-text); border: 2px solid var(--bbmb-strong); padding: 22px; }
.bbmb-page .bbmb-leave h4 { font: 28px/1.05 var(--font-display); text-transform: uppercase; margin: 0 0 8px; }
.bbmb-page .bbmb-leave p { margin: 0 0 16px; font: 400 15px/1.5 var(--font-body); color: var(--bbmb-text-2); }

.bbmb-page .bbmb-welcome .bbmb-x { color: var(--bbmb-card-muted); }

/* =========================== 0.7.0 additions =========================== */
.bbmb-page .bbmb-shell { min-height: 0; }
.bbmb-page .bbmb-main { min-height: 360px; }
.bbmb-page .bbmb-mcard { max-width: 560px; }
.bbmb-page .bbmb-welcome { max-width: 900px; }
.bbmb-page .bbmb-shell.bbmb-leave { position: absolute; inset: 0; z-index: 80; background: rgba(10,10,10,.6); }
.bbmb-page .bbmb-leave-link { margin: 4px 0 0; }
.bbmb-page .bbmb-confirm { font: 600 20px/1.35 var(--font-body); margin: 6px 0 8px; }
.bbmb-page .bbmb-trow .bbmb-btn { flex: none; }
.bbmb-page .bbmb-msg b { font-weight: 800; }
/* entry page */
.bbmb-page .bbmb-entry { max-width: 640px; }
.bbmb-page .bbmb-entry-tabs { margin: 0 0 18px; }
.bbmb-page .bbmb-steps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 16px; flex-wrap: wrap; }
.bbmb-page .bbmb-steps li { font: 700 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; padding: 6px 8px; border: 1.5px solid var(--bbmb-control); color: var(--bbmb-muted); }
.bbmb-page .bbmb-steps li.on { background: var(--bbmb-accent); color: var(--bbmb-on-accent); border-color: var(--bbmb-strong); }
.bbmb-page .bbmb-steps li.done { color: var(--bbmb-text); border-color: var(--bbmb-strong); }
.bbmb-page .bbmb-choice { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.bbmb-page .bbmb-choice legend { margin-bottom: 6px; }
.bbmb-page .bbmb-choice label { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border: 2px solid var(--bbmb-control); background: var(--bbmb-field-bg); color: var(--bbmb-text); font: 700 13px/1 var(--font-body); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.bbmb-page .bbmb-choice label:has(input:checked) { background: var(--bbmb-seg-on-bg); color: var(--bbmb-seg-on-text); border-color: var(--bbmb-seg-border); }
.bbmb-page .bbmb-choice input { accent-color: var(--bbmb-accent); margin: 0; }
.bbmb-page .bbmb-choice .i { width: 18px; height: 18px; }
.bbmb-page .bbmb-disclose { border: 2px solid var(--bbmb-warn-border); background: var(--bbmb-warn-bg); color: var(--bbmb-warn-text); padding: 10px 12px; margin: 0 0 14px; }
.bbmb-page .bbmb-disclose p { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 6px; font: 600 13px/1.45 var(--font-body); }
.bbmb-page .bbmb-disclose p .i { width: 18px; height: 18px; margin-top: 1px; }
.bbmb-page .bbmb-disclose .d-note { display: block; font: 400 12px/1.45 var(--font-mono); margin: 4px 0 0; }
/* 0.7.4 (REF-12, Owner): compact preview under SEND CODE (the full ON/OFF disclosure stays on PROFILE). */
.bbmb-page .bbmb-disclose.is-compact { padding: 8px 10px; margin: 12px 0 0; }
.bbmb-page .bbmb-disclose.is-compact p { font: 500 12px/1.4 var(--font-body); margin: 0; }
.bbmb-page .bbmb-disclose.is-compact p b { display: block; font-weight: 800; font-size: 13px; margin-bottom: 2px; }
.bbmb-page .bbmb-disclose.is-compact p .i { width: 16px; height: 16px; flex: none; }
/* only the disclosure for the chosen contact type (browsers without :has() show both) */
.bbmb-page .bbmb-contact-form:has(input[value="mobile"]:checked) .d-email,
.bbmb-page .bbmb-contact-form:has(input[value="email"]:checked) .d-mobile { display: none; }
.bbmb-page .bbmb-dob { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 10px; max-width: 420px; margin-bottom: 14px; }
.bbmb-page .bbmb-dob legend { grid-column: 1 / -1; margin-bottom: 6px; }
.bbmb-page .bbmb-dob label span { display: block; font: 700 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bbmb-muted); margin-bottom: 4px; }
.bbmb-page .bbmb-code-inp { font-family: var(--font-mono); font-size: 24px; letter-spacing: .4em; max-width: 260px; }
.bbmb-page .bbmb-entry .bbmb-link { margin-top: 10px; }

/* =========================== RESPONSIVE =========================== */
/* tablet landscape (900–1179) */
@container bbmbpage (min-width: 900px) and (max-width: 1179px) {
  .bbmb-page .bbmb-in { padding: 0 24px; }
  .bbmb-page .bbmb-tabs a { padding: 0 10px; gap: 6px; font-size: 12px; }
  .bbmb-page .bbmb-tabs a .i { width: 16px; height: 16px; }
  .bbmb-page .bbmb-band h1 { font-size: 42px; }
}
/* below 900: in-page top tab strip (0.7.0 has four sections, so no bottom bar) */
@container bbmbpage (max-width: 899px) {
  .bbmb-page .bbmb-in { padding: 0 24px; }
  .bbmb-page .bbmb-band h1 { font-size: 40px; }
  .bbmb-page .bbmb-tabs { overflow-x: auto; scrollbar-width: none; margin-top: 16px; }
  .bbmb-page .bbmb-tabs .sp { display: none; }
  .bbmb-page .bbmb-tabs a { flex: none; height: 50px; padding: 0 12px; font-size: 12px; }
  .bbmb-page .bbmb-tabs a:active { background: var(--bbmb-pressed-bg); color: var(--bbmb-pressed-text); }
  .bbmb-page .bbmb-main { padding-bottom: 48px; }
  .bbmb-page .bbmb-sec-h h2 { font-size: 30px; }
}
/* mobile portrait (<600) */
@container bbmbpage (max-width: 599px) {
  .bbmb-page .bbmb-in { padding: 0 16px; }
  .bbmb-page .bbmb-band { display: block; padding-top: 16px; }
  .bbmb-page .bbmb-band h1 { font-size: 34px; }
  .bbmb-page .bbmb-side { align-items: flex-start; text-align: left; margin-top: 10px; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }
  .bbmb-page .bbmb-tabs a .i { display: none; }
  .bbmb-page .bbmb-main { padding-top: 18px; padding-bottom: 40px; }
  .bbmb-page .bbmb-dl { grid-template-columns: 1fr; }
  .bbmb-page .bbmb-panel { padding: 16px; }
  .bbmb-page .bbmb-btn { height: 48px; }
  .bbmb-page .bbmb-actions .bbmb-btn, .bbmb-page .bbmb-actions .bbmb-inline { flex: 1 1 100%; }
  .bbmb-page .bbmb-actions .bbmb-inline .bbmb-btn { width: 100%; }
  .bbmb-page .bbmb-seg button { height: 36px; }
  .bbmb-page .bbmb-trow { flex-wrap: wrap; }
  .bbmb-page .bbmb-savebar .bbmb-btn { flex: 1 1 100%; }
  .bbmb-page .bbmb-mcard b { font-size: 32px; overflow-wrap: anywhere; }
  .bbmb-page .bbmb-big { overflow-wrap: anywhere; }
}
/* mobile landscape (short viewport) */
@media (orientation: landscape) and (max-height: 500px) {
  .bbmb-page .bbmb-band { padding-top: 10px; display: flex; align-items: center; }
  .bbmb-page .bbmb-band h1 { font-size: 26px; }
  .bbmb-page .bbmb-who b { font-size: 14px; }
  .bbmb-page .bbmb-tabs { margin-top: 8px; }
  .bbmb-page .bbmb-tabs a { height: 42px; font-size: 11px; }
  .bbmb-page .bbmb-main { padding-top: 12px; padding-bottom: 24px; min-height: 0; }
  .bbmb-page .bbmb-sec-h { margin-bottom: 10px; }
  .bbmb-page .bbmb-sec-h h2 { font-size: 22px; }
  .bbmb-page .bbmb-sec-h p { display: none; }
  .bbmb-page .bbmb-panel { padding: 12px 14px; margin-bottom: 10px; }
  .bbmb-page .bbmb-btn { height: 42px; }
  .bbmb-page .bbmb-leave .card { margin-top: 40px; }
}

/* 0.7.0 audit: hidden Leave dialog stays hidden; text-style buttons/links get a 44px tap area without changing how they look */
.bbmb-page .bbmb-leave[hidden] { display: none !important; }
.bbmb-page .bbmb-link { position: relative; }
.bbmb-page .bbmb-link::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }

/* =========================== NAVIGATION (frozen v5-1, 0.7.0 final) ===========================
   ≥900px: seven tabs with icons.  600–899px: seven tabs, labels only (v5-1 tune);
   600–719px: slightly tighter spacing so all seven fit without sideways scrolling.
   <600px: tabs hidden; five-item bottom bar (Home · Alerts · Saved · Activity · Me), five equal
   areas that scale with the screen width and stop growing at 430px (icons 20→26px, labels 9→11px,
   height 56→64px), plus the iPhone home-indicator safe area. The bar is sticky inside The Cellar,
   so it never covers the last content and settles above the site footer. */
.bbmb-page .bbmb-bar { display: none; }
.bbmb-page .bbmb-back { display: none; }
@container bbmbpage (min-width: 600px) and (max-width: 899px) {
  .bbmb-page .bbmb-tabs { overflow-x: visible; }
  .bbmb-page .bbmb-tabs a .i { display: none; }
  .bbmb-page .bbmb-tabs a { padding: 0 11px; }
}
@container bbmbpage (min-width: 600px) and (max-width: 719px) {
  .bbmb-page .bbmb-tabs { gap: 0; }
  .bbmb-page .bbmb-tabs a { padding: 0 clamp(5px, 1cqi, 8px); font-size: 11px; letter-spacing: .03em; }
}
@container bbmbpage (max-width: 599px) {
  .bbmb-page .bbmb-tabs { display: none; }
  .bbmb-page .bbmb-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: sticky; bottom: 0; z-index: 40; background: var(--bbmb-bar-bg); border-top: 2px solid var(--bbmb-bar-top); padding: 0 max(4px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left)); }
  .bbmb-page .bbmb-bar a { position: relative; min-width: 0; height: clamp(56px, 16cqi, 64px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(3px, 1.2cqi, 5px); color: var(--bbmb-bar-text); text-decoration: none; font: 700 clamp(9px, 2.6cqi, 11px)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
  .bbmb-page .bbmb-bar a .i { width: clamp(20px, 6.2cqi, 26px); height: clamp(20px, 6.2cqi, 26px); }
  .bbmb-page .bbmb-bar a[aria-current="page"] { color: var(--bbmb-bar-on-text); background: var(--bbmb-bar-on-bg); }
  .bbmb-page .bbmb-bar a[aria-current="page"]::before { content: ""; position: absolute; top: -2px; left: 22%; right: 22%; height: 4px; background: var(--bbmb-bar-on-line); }
  .bbmb-page .bbmb-bar a:active { background: var(--bbmb-pressed-bg); color: var(--bbmb-pressed-text); }
  .bbmb-page .bbmb-bar a:focus-visible { outline-offset: -3px; }
  /* 0.12.2 (P4-133): the frozen v5.1 ALERTS count (cellar-v5.css .bbmb-bar .ct); "99+" stays inside its fifth of the bar */
  .bbmb-page .bbmb-bar .ct { position: absolute; top: 8px; left: calc(50% + 6px); background: var(--bbmb-accent); color: var(--bbmb-on-accent); font: 700 10px/1 var(--font-mono); padding: 3px 5px; outline: 1.5px solid var(--bbmb-strong); white-space: nowrap; }
  .bbmb-page .bbmb-back { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--bbmb-link); text-decoration: none; margin-bottom: 12px; min-height: 44px; }
  .bbmb-page .bbmb-back .i { transform: rotate(180deg); width: 16px; height: 16px; }
  .bbmb-page .bbmb-main { padding-bottom: 24px; }
}

/* Me screen (frozen v5-1 list) */
.bbmb-page .bbmb-me a, .bbmb-page .bbmb-me-form button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 0 16px; background: var(--bbmb-panel); border: 1.5px solid var(--bbmb-line); margin: 0 0 8px; text-decoration: none; color: var(--bbmb-text); font: 22px/1 var(--font-display); text-transform: uppercase; cursor: pointer; text-align: left; }
.bbmb-page .bbmb-me-form button { text-transform: none; }
.bbmb-page .bbmb-me a .i:last-child, .bbmb-page .bbmb-me-form button .i:last-child { margin-left: auto; color: var(--bbmb-muted); }
.bbmb-page .bbmb-me a:active, .bbmb-page .bbmb-me-form button:active { background: var(--bbmb-pressed-bg); color: var(--bbmb-pressed-text); }
.bbmb-page .bbmb-me a:hover, .bbmb-page .bbmb-me-form button:hover { border-color: var(--bbmb-strong); }

/* Display-only empty states (frozen v5-1 empty-state layout) */
.bbmb-page .bbmb-empty { border: 2px dashed var(--bbmb-control); padding: 28px 22px; text-align: center; background: var(--bbmb-panel); }
.bbmb-page .bbmb-empty .i { width: 36px; height: 36px; color: var(--bbmb-muted); }
.bbmb-page .bbmb-empty h4 { font: 26px/1.05 var(--font-display); text-transform: uppercase; margin: 10px 0 6px; }
.bbmb-page .bbmb-empty p { margin: 0 auto; max-width: 460px; color: var(--bbmb-text-2); font: 400 15px/1.5 var(--font-body); }

/* 0.7.0 fix: the Join / Sign in switch shares the tab style; keep it visible on phones (only the member tab row hides below 600px). */
@container bbmbpage (max-width: 599px) {
  .bbmb-page .bbmb-tabs.bbmb-entry-tabs { display: flex; }
}

/* 0.7.0 fix: from 922px Astra makes the content container a flex row (.site-content .ast-container { display: flex }).
   As a size container (container-type: inline-size) The Cellar has no content width of its own, so without an explicit
   width it shrank to 0px there — the container queries then saw a tiny phone. Fill the container instead. */
.bbmb-page { width: 100%; }

/* 0.7.0 fix: iPhone landscape (viewport-fit=cover) — keep Cellar content clear of the screen cutout. Same max() pattern as
   the site header: the larger of the usual side padding and the safe-area inset, never both (0 on devices without one).
   The phone bottom bar already carries its own safe-area padding. */
.bbmb-page .bbmb-in { padding-left: max(32px, env(safe-area-inset-left)); padding-right: max(32px, env(safe-area-inset-right)); }
@container bbmbpage (max-width: 1179px) {
  .bbmb-page .bbmb-in { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
}
@container bbmbpage (max-width: 599px) {
  .bbmb-page .bbmb-in { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
}

/* 0.7.0 fix: the site's Back to Top button (Astra #ast-scroll-top, fixed bottom-right) sat over the Me item of the phone
   bottom bar. Hidden on Cellar pages only, and only below 600px, where the bottom bar is shown (below 922px the Cellar is
   as wide as the screen, so this width matches the bar's own container query). Everywhere else it is unchanged. */
@media (max-width: 599px) {
  body.bbmb-cellar-page #ast-scroll-top { display: none !important; }
}

/* =========================== 0.7.1 VISUAL + COPY REFINEMENTS ===========================
   All rules stay inside The Cellar (.bbmb-page). Nothing here touches the site header, Astra settings,
   Back to Top or the TEST badge. */

/* Headings: Astra's global "h1–h6 { color: var(--ast-global-color-2) }" (navy) beat the inherited Cellar text
   colour, in Light and in Dark. Black in Light, off-white in Dark; the muted section labels (.bbmb-h3) and the
   yellow "Cellar" highlight keep their own, more specific colours. */
.bbmb-page h1, .bbmb-page h2, .bbmb-page h3, .bbmb-page h4 { color: var(--bbmb-text); }

/* Text fields: Astra's "input[type=text]:focus { border-style: dotted }" outranked the Cellar field border, so a
   dotted border showed inside the yellow focus ring. Keep the solid 2px border (focus colour + ring unchanged). */
.bbmb-page .bbmb-inp:focus, .bbmb-page .bbmb-inp:focus-visible { border-style: solid; border-width: 2px; }

/* A phone number Safari turns into a link anyway stays in the normal text colour (Cellar pages also send
   format-detection: telephone=no). */
.bbmb-page a[href^="tel:"] { color: inherit; text-decoration: none; }

/* Code screen: the v5-1 "resend" line (it was missing, so the two parts ran together). */
.bbmb-page .bbmb-resend { font: 400 12px/1.4 var(--font-mono); color: var(--bbmb-muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 12px 0; }

/* Verified contacts (Account & Security): the VERIFIED tag sits beside the value when both fit and moves under
   it when they don't, so an address is no longer squeezed and split mid-word. */
.bbmb-page .bbmb-contacts li > div { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 6px; }
.bbmb-page .bbmb-contacts li > div > .bbmb-lbl { flex: 0 0 100%; margin: 0; }
.bbmb-page .bbmb-contacts li > div > b { flex: 0 1 auto; min-width: 0; }

/* "What's allowed?" (v5-1 styling, which was missing) with a 44px tap area. */
.bbmb-page .bbmb-details { margin-top: 14px; font: 400 13px/1.5 var(--font-body); color: var(--bbmb-text-2); }
.bbmb-page .bbmb-details summary { cursor: pointer; min-height: 44px; font: 700 11px/44px var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--bbmb-text); }
.bbmb-page .bbmb-details ul { margin: 8px 0 0; padding-left: 18px; }
.bbmb-page .bbmb-details code { font: 700 12px/1 var(--font-mono); background: var(--bbmb-panel-2); padding: 2px 4px; }

/* Light / Dark switch: a 44px tap area on touch screens only (the mouse-sized desktop control is unchanged). */
@media (pointer: coarse) {
  .bbmb-page .bbmb-seg button { min-height: 44px; }
}

/* 0.7.2 — six code boxes over the one real code input (enhanced by script; without it the plain input shows). */
.bbmb-page .bbmb-otp { position: relative; }
.bbmb-page .bbmb-otp-boxes { display: none; }
.bbmb-page .bbmb-otp.is-live .bbmb-otp-boxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; pointer-events: none; }
.bbmb-page .bbmb-otp-boxes i { height: 54px; border: 2px solid var(--bbmb-control); background: var(--bbmb-field-bg); display: grid; place-items: center; font: 700 24px/1 var(--font-mono); font-style: normal; color: var(--bbmb-text); }
.bbmb-page .bbmb-otp-boxes i.f { background: var(--bbmb-field-fill); border-color: var(--bbmb-strong); }
.bbmb-page .bbmb-otp-boxes i.cur { border-color: var(--bbmb-focus); box-shadow: 0 0 0 3px var(--bbmb-accent); }
.bbmb-page .bbmb-otp.is-live .bbmb-code-inp { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border-color: transparent; background: transparent; color: transparent; caret-color: transparent; -webkit-text-fill-color: transparent; box-shadow: none; transition: none; } /* the site animates input sizes */
.bbmb-page .bbmb-otp.is-live .bbmb-code-inp::selection { background: transparent; }
/* 0.7.2 — the panel inside the header sheet / popover. */
.bbmb-page.bbmb-embed .bbmb-shell { min-height: 0; }
.bbmb-page.bbmb-embed .bbmb-main { min-height: 0; padding-top: 6px; padding-bottom: 20px; }
.bbmb-page.bbmb-embed .bbmb-in { padding-left: 20px; padding-right: 20px; }
.bbmb-page.bbmb-embed .bbmb-sec-h { margin-bottom: 14px; padding-right: 44px; }
.bbmb-page .bbmb-sheet-foot { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--bbmb-line, rgba(10,10,10,.2)); display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 400 14px/1.4 var(--font-body); color: var(--bbmb-text-2); }
.bbmb-page .bbmb-sheet-foot .bbmb-link { min-height: 44px; }
/* 0.7.3 — readable @ (Space Mono's @ reads like a boxed "a"): the field prefix and @ in mono labels use Archivo. */
.bbmb-page .bbmb-pre { font-family: var(--font-body); font-weight: 800; font-size: 18px; }
.bbmb-page .bbmb-at { font-family: var(--font-body); font-weight: 800; font-size: 1.15em; letter-spacing: 0; line-height: 0; }
/* 0.7.3 — one field per contact type; the one matching the chosen type shows (works without JavaScript). */
.bbmb-page form:has(input[name="bb_type"][value="mobile"]:checked) .bbmb-c-email,
.bbmb-page form:has(input[name="bb_type"][value="email"]:checked) .bbmb-c-mobile { display: none; }
/* 0.7.3 — what switches on when the membership is created (v5.1 ON/OFF rows; nothing is recorded before Join The Cellar). */
.bbmb-page .bbmb-rows { border: 2px solid var(--bbmb-strong); margin: 0 0 16px; background: var(--bbmb-field-bg); }
.bbmb-page .bbmb-rows-k { font: 700 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bbmb-muted); padding: 9px 12px 0; margin: 0; }
.bbmb-page .bbmb-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; font: 600 13px/1.4 var(--font-body); color: var(--bbmb-text); }
.bbmb-page .bbmb-row + .bbmb-row { border-top: 1px solid var(--bbmb-line); }
/* 0.17.1: the @Username prefix row (also .bbmb-row, inside .bbmb-fld) stays the plain flush row of line 184 — the newsletter-row
   gap / padding above detached the "@" box (no right border by design) from its field. Newsletter rows unchanged. */
.bbmb-page .bbmb-fld > .bbmb-row { gap: 0; padding: 0; justify-content: flex-start; align-items: stretch; font: inherit; }
.bbmb-page .bbmb-fld > .bbmb-row .bbmb-inp { flex: 1; min-width: 0; }
.bbmb-page .bbmb-on, .bbmb-page .bbmb-off { flex: none; font: 700 11px/1.4 var(--font-mono); text-transform: uppercase; padding: 3px 6px; }
.bbmb-page .bbmb-on { background: var(--bbmb-seg-on-bg); color: var(--bbmb-seg-on-text); }
.bbmb-page .bbmb-off { border: 1.5px solid var(--bbmb-strong); }
.bbmb-page .bbmb-rows-note { font: 400 12px/1.45 var(--font-body); color: var(--bbmb-muted); padding: 8px 12px; margin: 0; border-top: 1px solid var(--bbmb-line); }
/* 0.7.3 — progress on the pressed button (no dimming). */
.bbmb-page .bbmb-btn.is-busy { cursor: progress; }

/* ===== 0.9.0 (P3-A refinement + P3-B/C) — approved v5.1 components and the approved P3-B/C mockups; theme tokens only ===== */
/* Anchored sections: a save returns the member here (#name, #username, #avatar, #gender, #interests, #email-newsletter, #sign-in). */
.bbmb-page .bbmb-panel[id], .bbmb-page .bbg[id] { scroll-margin-top: 24px; }
/* v5.1 radio cards (.bbmb-radio) — real radio inputs (no JavaScript); the checked card looks like v5.1's .on. */
.bbmb-page .bbmb-radio { display: grid; gap: 8px; margin: 8px 0 14px; }
.bbmb-page .bbmb-radio label { position: relative; display: flex; gap: 10px; align-items: center; min-height: 46px; border: 2px solid var(--bbmb-control); padding: 0 12px; font: 600 14px/1.2 var(--font-body); color: var(--bbmb-text); cursor: pointer; }
.bbmb-page .bbmb-radio label input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.bbmb-page .bbmb-radio label i { width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 50%; flex: none; }
.bbmb-page .bbmb-radio label .i { width: 18px; height: 18px; }
.bbmb-page .bbmb-radio label:has(input:checked) { border-color: var(--bbmb-strong); background: var(--bbmb-unread-bg); }
.bbmb-page .bbmb-radio label:has(input:checked) i { background: radial-gradient(currentColor 0 4px, transparent 5px); }
.bbmb-page .bbmb-radio label:has(input:focus-visible) { outline: 3px solid var(--bbmb-focus); outline-offset: 3px; }
/* v5.1 Interests chips — each chip is its own one-button form. */
.bbmb-page .bbmb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bbmb-page .bbmb-chipform { display: contents; }
.bbmb-page .bbmb-chip { height: 40px; padding: 0 14px; border: 2px solid var(--bbmb-control); background: var(--bbmb-field-bg); color: var(--bbmb-text); display: inline-flex; align-items: center; gap: 6px; font: 700 13px/1 var(--font-body); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.bbmb-page .bbmb-chip .i { width: 16px; height: 16px; }
.bbmb-page .bbmb-chip.on { background: var(--bbmb-accent); color: var(--bbmb-on-accent); border-color: var(--bbmb-strong); }
.bbmb-page .bbmb-chip:hover { border-color: var(--bbmb-strong); }
.bbmb-page .bbmb-chip:focus-visible { outline: 3px solid var(--bbmb-focus); outline-offset: 3px; }
/* Avatar circle (approved: round; the initial in a dashed circle when none is chosen). */
.bbmb-page .bbav { display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden; flex: none; border: 2px solid var(--bbmb-strong); box-sizing: border-box; }
.bbmb-page .bbav .bbav-svg { width: 100%; height: 100%; display: block; }
.bbmb-page .bbav.none { border: 2px dashed var(--bbmb-control); background: var(--bbmb-field-bg); color: var(--bbmb-muted); font-family: var(--font-display); line-height: 1; }
/* Profile → Avatar panel */
.bbmb-page .bbav-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.bbmb-page .bbav-row .t { flex: 1 1 220px; min-width: 0; }
.bbmb-page .bbav-row .t b { display: block; font: 800 17px/1.25 var(--font-body); }
.bbmb-page .bbav-row .t span { display: block; font: 400 14px/1.45 var(--font-body); color: var(--bbmb-muted); margin-top: 2px; }
/* The inline picker: 15 radio cards — 5 per row (desktop / tablet), 3 per row (phone). */
.bbmb-page .bbav-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 6px 0 16px; }
.bbmb-page .bbav-opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border: 2px solid var(--bbmb-line); background: var(--bbmb-field-bg); color: var(--bbmb-text); cursor: pointer; min-height: 44px; }
.bbmb-page .bbav-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.bbmb-page .bbav-opt:hover { border-color: var(--bbmb-strong); }
.bbmb-page .bbav-opt .bbav { width: 56px; height: 56px; }
.bbmb-page .bbav-opt .nm { font: 700 11px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.bbmb-page .bbav-opt .cur { font: 700 9px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bbmb-muted); }
.bbmb-page .bbav-tick { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; display: none; place-items: center; background: var(--bbmb-accent); color: var(--bbmb-on-accent); border: 2px solid var(--bbmb-strong); }
.bbmb-page .bbav-tick .i { width: 14px; height: 14px; }
.bbmb-page .bbav-opt:has(input:checked) { border-color: var(--bbmb-strong); background: var(--bbmb-unread-bg); box-shadow: inset 0 0 0 2px var(--bbmb-strong); }
.bbmb-page .bbav-opt:has(input:checked) .bbav { outline: 3px solid var(--bbmb-accent); outline-offset: 2px; }
.bbmb-page .bbav-opt:has(input:checked) .bbav-tick { display: grid; }
.bbmb-page .bbav-opt:has(input:focus-visible) { outline: 3px solid var(--bbmb-focus); outline-offset: 3px; }
@container bbmbpage (max-width: 599px) {
  .bbmb-page .bbav-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .bbmb-page .bbav-row .bbmb-btn { flex: 1 1 100%; }
}
/* Your details → Gender (Optional): v5.1 radio cards, 2 + 1. */
.bbmb-page .bbg { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--bbmb-line); }
.bbmb-page .bbg .opt { font-weight: 400; text-transform: none; letter-spacing: 0; font-family: var(--font-body); }
.bbmb-page .bbg-radio { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; }
.bbmb-page .bbg-radio label.wide { grid-column: 1 / -1; }
@container bbmbpage (max-width: 380px) { .bbmb-page .bbg-radio { grid-template-columns: 1fr; } }

/* 0.9.1 (approved P3-B saved-state design): once a Gender is saved, one compact line in Your details with a small Change
   link; Change reopens the same options in that place (both columns). Theme tokens only. */
.bbmb-page .bbmb-dl > div[id] { scroll-margin-top: 24px; }
.bbmb-page .bbmb-dl dd.bbmb-gval { justify-content: space-between; flex-wrap: nowrap; }
.bbmb-page .bbmb-gv { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.bbmb-page .bbmb-gchg { margin-left: auto; flex: none; font-size: 11px; color: var(--bbmb-muted); text-decoration: underline; text-underline-offset: 3px; }
.bbmb-page .bbmb-gchg:hover { color: var(--bbmb-link); }
.bbmb-page .bbmb-gchg:focus-visible { outline: 3px solid var(--bbmb-accent); outline-offset: 2px; color: var(--bbmb-link); }
.bbmb-page .bbmb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bbmb-page .bbmb-dl > div.bbmb-gedit { grid-column: 1 / -1; }
.bbmb-page .bbmb-gedit dd { display: block; }
.bbmb-page .bbmb-gedit dt .opt { font-weight: 400; text-transform: none; letter-spacing: 0; font-family: var(--font-body); }
.bbmb-page .bbmb-gedit .bbg { margin-top: 0; padding-top: 0; border-top: 0; }

/* 0.9.2 (P3-D): Delete my profile — the approved v5.1 delete flow. Yellow = normal Cellar; dark red = the deletion flow.
   Scoped to the Delete panel only (.bbmb-danger). Theme tokens only: the existing danger tokens (light and dark) colour
   the code boxes, tags, focus, warnings, the chosen contact and Cancel hover inside Delete. Nothing outside it changes. */
.bbmb-page .bbmb-danger { border-color: var(--bbmb-danger-border); background: var(--bbmb-danger-bg); }
.bbmb-page .bbmb-danger .bbmb-h3 { color: var(--bbmb-danger); }
.bbmb-page .bbmb-danger .bbmb-h3::before { background: var(--bbmb-danger); outline: 0; }
.bbmb-page .bbmb-step { display: inline-block; font: 700 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; color: var(--bbmb-text); }
.bbmb-page .bbmb-del-h { font: 28px/1.05 var(--font-display); text-transform: uppercase; margin: 0 0 6px; color: var(--bbmb-text); }
.bbmb-page .bbmb-list { margin: 0 0 16px; padding-left: 20px; font: 400 15px/1.55 var(--font-body); color: var(--bbmb-text-2); }
.bbmb-page .bbmb-list li { margin-bottom: 6px; }
.bbmb-page .bbmb-final { font: 22px/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; color: var(--bbmb-danger); border-top: 2px solid var(--bbmb-danger-border); border-bottom: 2px solid var(--bbmb-danger-border); padding: 10px 0; margin: 4px 0 16px; }
.bbmb-page .bbmb-del { font-family: var(--font-mono); letter-spacing: .3em; font-weight: 700; max-width: 320px; text-transform: uppercase; }
.bbmb-page .bbmb-danger .bbmb-time { font: 400 11px/1.4 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--bbmb-muted); }
.bbmb-page .bbmb-danger a.bbmb-btn { text-decoration: none; }
.bbmb-page .bbmb-shell .bbmb-danger *:focus-visible { outline-color: var(--bbmb-danger-border); box-shadow: none; }
.bbmb-page .bbmb-danger .bbmb-inp:focus { border-color: var(--bbmb-danger-border); box-shadow: 0 0 0 3px var(--bbmb-danger-bg); outline: 2px solid var(--bbmb-danger-border); }
.bbmb-page .bbmb-danger .bbmb-otp-boxes i.f { background: var(--bbmb-danger-bg); border-color: var(--bbmb-danger-border); }
.bbmb-page .bbmb-danger .bbmb-otp-boxes i.cur { border-color: var(--bbmb-danger-border); box-shadow: 0 0 0 3px var(--bbmb-danger-border); }
.bbmb-page .bbmb-danger .bbmb-tag.ok { background: var(--bbmb-danger-btn); color: var(--bbmb-on-danger); border-color: var(--bbmb-danger-btn); }
.bbmb-page .bbmb-danger .bbmb-tag.ok .i { color: var(--bbmb-on-danger); }
.bbmb-page .bbmb-danger .bbmb-msg.warn { background: var(--bbmb-danger-bg); color: var(--bbmb-danger); border-color: var(--bbmb-danger-border); }
.bbmb-page .bbmb-danger .bbmb-radio label:has(input:checked) { border-color: var(--bbmb-danger-border); background: var(--bbmb-danger-bg); }
.bbmb-page .bbmb-danger .bbmb-radio label:has(input:focus-visible) { outline-color: var(--bbmb-danger-border); }
.bbmb-page .bbmb-danger .bbmb-btn:not(.danger):not(.final):hover { border-color: var(--bbmb-danger-border); color: var(--bbmb-danger); background: var(--bbmb-danger-bg); }

/* 0.12.2 (Owner, 26 Oct): the private TEST marker (kernel/test-layer.php; Master TEST only — it does not exist under PUBLIC)
   sat on top of the phone bottom bar (HOME / ALERTS + count). On Cellar pages at phone width it now sits just above the bar. */
@media (max-width: 640px) {
  body:has(.bbmb-bar) #bb-community-test-marker { bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
}

/* =====================================================================
   0.13.0 (Phase 5 Update 1, schema 10) — passwords, Account & Security, adding a missing contact. The approved v5.2
   additions (cellar-v5-2/shared/cellar-v52.css) and the v5.1 add-contact / prompt rules (cellar-v5.css), on the existing
   --bbmb-* tokens (Light and Dark). Green = the approved Cellar green (P4-132 "restored").
   ===================================================================== */
.bbmb-shell { --bbmb-ok-green: #1e7b34; --bbmb-ok-green-bg: #e9f6ec; }
.bbmb-shell[data-bbmb-theme="dark"] { --bbmb-ok-green: #7fd19b; --bbmb-ok-green-bg: #12291a; }
.bbmb-page .bbmb-pw { display: flex; }
.bbmb-page .bbmb-pw .bbmb-inp { border-right: 0; flex: 1; min-width: 0; }
.bbmb-page .bbmb-pw-eye { flex: none; width: 52px; height: 48px; margin: 0; border: 2px solid var(--bbmb-control); border-radius: 0; background: var(--bbmb-field-bg); color: var(--bbmb-text); display: grid; place-items: center; cursor: pointer; padding: 0; box-shadow: none; }
.bbmb-page .bbmb-pw-eye:hover { background: var(--bbmb-btn-hover-bg); color: var(--bbmb-btn-hover-text); border-color: var(--bbmb-btn-hover-border); }
.bbmb-page .bbmb-pw-eye:focus-visible { outline: 3px solid var(--bbmb-focus); outline-offset: 2px; }
.bbmb-page .bbmb-pw-eye .i { width: 20px; height: 20px; }
.bbmb-page .bbmb-meter { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 4px; align-items: center; margin: 8px 0 4px; }
.bbmb-page .bbmb-meter i { height: 6px; border: 1.5px solid var(--bbmb-control); background: var(--bbmb-field-bg); }
.bbmb-page .bbmb-meter i.on { background: var(--bbmb-strong); border-color: var(--bbmb-strong); }
.bbmb-page .bbmb-meter.weak i.on { background: var(--bbmb-danger); border-color: var(--bbmb-danger); }
.bbmb-page .bbmb-meter.pass i.on { background: var(--bbmb-ok-green); border-color: var(--bbmb-ok-green); }
.bbmb-page .bbmb-meter b { font: 700 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; margin-left: 6px; color: var(--bbmb-text); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.bbmb-page .bbmb-meter.weak b { color: var(--bbmb-danger); }
.bbmb-page .bbmb-meter.pass b { color: var(--bbmb-ok-green); }
.bbmb-page .bbmb-meter b .i, .bbmb-page .bbmb-pwhelp .i { width: 14px; height: 14px; flex: none; }
.bbmb-page .bbmb-pwhelp { font: 400 12px/1.45 var(--font-body); color: var(--bbmb-muted); margin: 2px 0 12px; }
.bbmb-page .bbmb-pwhelp:empty { display: none; }
.bbmb-page .bbmb-pwhelp.err { color: var(--bbmb-danger); font-weight: 600; }
.bbmb-page .bbmb-pwhelp.ok { color: var(--bbmb-ok-green); font-weight: 700; display: flex; align-items: center; gap: 4px; }
.bbmb-page .bbmb-inp.is-ok { border-color: var(--bbmb-ok-green); }
.bbmb-page .bbmb-pwpanel .bbmb-fld, .bbmb-page .bbmb-pwpanel .bbmb-actions, .bbmb-page .bbmb-pwpanel .bbmb-msg, .bbmb-page .bbmb-pwpanel .bbmb-otp, .bbmb-page .bbmb-pwpanel .bbmb-resend, .bbmb-page .bbmb-pwpanel .bbmb-radio { max-width: 520px; }
.bbmb-page .bbmb-perm { display: flex; justify-content: space-between; gap: 8px; font: 400 12px/1.4 var(--font-mono); color: var(--bbmb-muted); margin: 0 0 12px; letter-spacing: .02em; }
.bbmb-page .bbmb-sess { font: 400 12px/1.45 var(--font-body); color: var(--bbmb-muted); margin: 10px 0 0; }
.bbmb-page .bbmb-shared { display: flex; gap: 6px; align-items: center; font: 700 10px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bbmb-muted); margin: 0 0 10px; }
.bbmb-page .bbmb-shared .i { width: 14px; height: 14px; }
.bbmb-page .bbmb-addflow { border: 2px solid var(--bbmb-strong); background: var(--bbmb-panel); padding: 14px; margin-top: 10px; width: 100%; box-sizing: border-box; }
.bbmb-page .bbmb-addflow .bbmb-step { margin-bottom: 8px; }
.bbmb-page .bbmb-addflow .bbmb-fld { margin-bottom: 12px; }
.bbmb-page .bbmb-contacts li.bbmb-missing { flex-wrap: wrap; }
.bbmb-page .bbmb-prompt { display: flex; gap: 16px; align-items: center; background: var(--bbmb-prompt-bg); border: 2px solid var(--bbmb-prompt-border); border-left-width: 10px; border-left-color: var(--bbmb-prompt-stripe); padding: 16px 18px; margin-bottom: 18px; flex-wrap: wrap; }
.bbmb-page .bbmb-prompt .bbmb-cic { width: 48px; height: 48px; }
.bbmb-page .bbmb-prompt div { flex: 1; min-width: 220px; }
.bbmb-page .bbmb-prompt b { display: block; font: 22px/1.1 var(--font-display); text-transform: uppercase; }
.bbmb-page .bbmb-prompt span.t { display: block; font: 400 14px/1.45 var(--font-body); color: var(--bbmb-text-2); margin-top: 4px; }
.bbmb-page .bbmb-okmark { width: 64px; height: 64px; background: var(--bbmb-accent); color: var(--bbmb-on-accent); border: 2px solid var(--bbmb-strong); display: grid; place-items: center; margin: 6px 0 12px; }
.bbmb-page .bbmb-okmark .i { width: 34px; height: 34px; }
.bbmb-page .bbmb-btn[disabled], .bbmb-page .bbmb-btn[disabled]:hover { background: var(--bbmb-disabled-bg); color: var(--bbmb-disabled-text); border-color: var(--bbmb-disabled-border); cursor: not-allowed; }
@media (max-width: 420px) { .bbmb-page .bbmb-meter b { font-size: 9px; } .bbmb-page .bbmb-prompt { padding: 12px 14px; } .bbmb-page .bbmb-prompt b { font-size: 18px; } }

/* ---------- 0.17.0: the required Terms / Privacy acknowledgement (full page) and the member-support line (C1–C5) ---------- */
.bbmb-page .bbmb-rows-k .opt { float: right; color: var(--bbmb-muted); }
.bbmb-page .bbmb-terms { border: 2px solid var(--bbmb-strong); background: var(--bbmb-field-bg); padding: 12px; margin: 0 0 16px; display: flex; gap: 12px; align-items: flex-start; }
.bbmb-page .bbmb-terms.is-error { border-color: var(--bbmb-danger-border); background: var(--bbmb-err-bg); }
.bbmb-page .bbmb-ck { position: relative; flex: none; width: 26px; height: 26px; margin-top: 1px; }
.bbmb-page .bbmb-ck input { position: absolute; inset: -9px; width: 44px; height: 44px; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.bbmb-page .bbmb-ck > span { position: absolute; inset: 0; border: 2px solid var(--bbmb-strong); background: var(--bbmb-field-bg); color: var(--bbmb-on-accent); display: grid; place-items: center; }
.bbmb-page .bbmb-ck > span .i { width: 18px; height: 18px; visibility: hidden; }
.bbmb-page .bbmb-ck input:checked + span { background: var(--bbmb-accent); }
.bbmb-page .bbmb-ck input:checked + span .i { visibility: visible; }
.bbmb-page .bbmb-ck input:focus-visible + span { outline: 3px solid var(--bbmb-focus); outline-offset: 3px; }
.bbmb-page .bbmb-terms.is-error .bbmb-ck > span { border-color: var(--bbmb-danger-border); }
.bbmb-page .bbmb-terms-t { font: 600 14px/1.45 var(--font-body); color: var(--bbmb-text); cursor: pointer; }
.bbmb-page .bbmb-terms-t a { color: var(--bbmb-link); font-weight: 800; text-decoration: none; border-bottom: 2px solid var(--bbmb-link-line); }
.bbmb-page .bbmb-terms-t a:hover { border-bottom-color: var(--bbmb-text); }
.bbmb-page .bbmb-terms-t .req { display: block; margin-top: 4px; font: 700 10px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--bbmb-muted); }
.bbmb-page .bbmb-terms-err { display: flex; gap: 6px; align-items: flex-start; font: 700 12px/1.35 var(--font-body); color: var(--bbmb-err-text); margin: -10px 0 16px; }
.bbmb-page .bbmb-terms-err .i { width: 16px; height: 16px; margin-top: 1px; }
.bbmb-page .bbmb-support { display: flex; gap: 8px; align-items: flex-start; margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--bbmb-line); font: 400 13px/1.5 var(--font-body); color: var(--bbmb-muted); }
.bbmb-page .bbmb-support .i { width: 16px; height: 16px; margin-top: 2px; }
.bbmb-page .bbmb-support a { color: var(--bbmb-link); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--bbmb-link-line); overflow-wrap: anywhere; }
.bbmb-page .bbmb-support a:hover { border-bottom-color: var(--bbmb-text); }