/* Barrel Broz Community 0.21.0 — the shared guest prompt ("YOU'RE ONE OF THE BROZ. RIGHT?").
   The Review guest prompt's rules (P4-61, round 2), MOVED UNCHANGED from modules/engagement/assets/engagement.css so that
   one prompt serves Review Like / Save / Comment and the website features that ask for it (Light / Dark toggle, PLAY).
   Only the parts of engagement.css's shared component rules that applied to the prompt are repeated here, scoped to the
   prompt's own layer (.bbe-gate-layer), so the prompt looks the same on any page. Loaded with gate.js: on Reviews as a
   dependency of the engagement styles, elsewhere by the header loader only where a feature asked for the prompt. */

/* ---------- tokens and base (engagement.css, the prompt's share) ---------- */
.bbe-gate-layer {
  --paper: #f7f7f2; --ink: #0a0a0a; --yellow: #ffd203; --deck: #545454; --meta: #8f8f89; --prose: #334155;
  --callout: #efefe8; --grey-light: #dcdcd4; --muted: #6a6a62; --rule: #dcdcd4; --link: #8f8f89; --red: #b3261e;
  --flash: #fff3b0; --danger: #b3261e;
  --f-display: 'Anton', Impact, sans-serif; --f-body: 'Archivo', system-ui, sans-serif; --f-mono: 'Space Mono', ui-monospace, monospace;
  box-sizing: border-box;
}
.bbe-gate-layer * { box-sizing: border-box; }
.bbe-gate-layer { font-family: var(--f-body); color: var(--ink); }
.bbe-gate-layer { font-size: 16px; font-weight: 400; line-height: normal; letter-spacing: normal; }
.bbe-gate-layer a { transition: none; }
.bbe-gate-layer .bbe-ico { display: block; width: 24px; height: 24px; flex: 0 0 auto; fill: var(--bbe-fill, none); stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: fill 120ms ease, transform 120ms ease; } /* the effective Review value (engagement.css sets the later 120 ms transition) */
.bbe-gate__x:is(:hover, :focus) { background: transparent; color: var(--ink); }

/* ---------- ROUND 2: guest membership prompt ---------- */
.bbe-gate { position: relative; background: #fff; border: 2px solid var(--ink); color: var(--ink); padding: 20px 20px 20px; text-align: left; }
.bbe-gate:focus { outline: none; }
.bbe-gate:focus-visible { outline: none; }
.bbe-gate__h { margin: 0 44px 8px 0; padding: 0; font: 400 26px/1.02 var(--f-display); text-transform: uppercase; letter-spacing: .01em; color: var(--ink); }
.bbe-gate__b { margin: 0 0 16px; font: 400 15px/1.45 var(--f-body); color: #33332f; }
.bbe-gate__acts { display: grid; gap: 8px; }
.bbe-gate__join, .bbe-gate__in { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 0; font: 800 14px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; color: var(--ink); text-decoration: none; }
.bbe-gate__join { background: #ffd203; }
.bbe-gate__in { background: transparent; }
@media (hover: hover) { .bbe-gate__join:hover, .bbe-gate__in:hover { background: var(--ink); color: #ffd203; } }
.bbe-gate__join:focus-visible, .bbe-gate__in:focus-visible, .bbe-gate__x:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.bbe-gate__x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: grid; place-items: center; appearance: none; border: 0; border-radius: 0; background: transparent; color: var(--ink); cursor: pointer; padding: 1px 6px; margin: 0; box-shadow: none; min-height: 0; font: 400 16px/normal var(--f-body); } /* 0.10.0 fidelity: P4-61's own button box (the theme's 500 / .912em / no padding never applies) */
.bbe-gate__x .bbe-ico { width: 20px; height: 20px; }
@media (hover: hover) { .bbe-gate__x:hover { background: var(--ink); color: #ffd203; } }
.bbe-gate-layer.is-pop .bbe-gate { position: absolute; z-index: 70; width: min(340px, calc(100vw - 32px)); box-shadow: 6px 6px 0 rgba(10, 10, 10, .14); }
.bbe-gate__caret { position: absolute; width: 14px; height: 14px; background: #fff; border: 2px solid var(--ink); transform: rotate(45deg); }
.bbe-gate.is-below .bbe-gate__caret { top: -9px; border-right: 0; border-bottom: 0; }
.bbe-gate.is-above .bbe-gate__caret { bottom: -9px; border-left: 0; border-top: 0; }
.bbe-gate-layer.is-sheet { position: fixed; inset: 0; z-index: 90; }
.bbe-scrim { position: absolute; inset: 0; background: rgba(10, 10, 10, .55); }
.bbe-gate-layer.is-sheet .bbe-gate { position: absolute; left: 0; right: 0; bottom: 0; border-width: 2px 0 0; padding: 10px 18px calc(20px + env(safe-area-inset-bottom, 0px)); max-height: calc(100% - 24px); overflow: auto; }
.bbe-gate__grab { width: 44px; height: 5px; background: var(--ink); margin: 0 auto 10px; }
.bbe-gate-layer.is-sheet .bbe-gate__x { top: 12px; right: 10px; }
.bbe-gate-layer.is-sheet .bbe-gate__h { font-size: 30px; margin-top: 6px; }
.bbe-gate-layer.is-sheet .bbe-gate__join, .bbe-gate-layer.is-sheet .bbe-gate__in { min-height: 56px; font-size: 15px; }
@media (min-width: 560px) {
  .bbe-gate-layer.is-sheet .bbe-gate > * { max-width: 560px; margin-left: auto; margin-right: auto; }
  .bbe-gate-layer.is-sheet .bbe-gate__h { margin-right: auto; padding-right: 44px; }
  .bbe-gate-layer.is-sheet .bbe-gate__acts { grid-template-columns: 1fr 1fr; }
}
@media (max-height: 499px) { .bbe-gate-layer.is-sheet .bbe-gate__h { font-size: 24px; } .bbe-gate-layer.is-sheet .bbe-gate__b { margin-bottom: 12px; } .bbe-gate-layer.is-sheet .bbe-gate__join, .bbe-gate-layer.is-sheet .bbe-gate__in { min-height: 48px; } }
html.bbe-lock, html.bbe-lock body { overflow: hidden; }