/* Barrel Broz Community 0.10.0 — Review Engagement (Phase 4 Update 2).
   IMPLEMENTS P4-61 AS IT IS (P4-70): the frozen integrated Review prototype (prototype/review-integrated/, fingerprints in
   PHASE4-DESIGN-SPECIFICATION.md PART U2). Rules are copied from its unchanged sources in their cascade order —
   assets/engagement.css (round 3.x Like / Save, panel, guest prompt, toast), comments-exploration/e-refined/assets/
   thread.css + refined.css (Comments), review-integrated/assets/integrated.css (integration) — with ONLY these changes:
     • prototype-only rules left out (simulation strips, "PROPOSED" / "simulated" markers, prototype navigation, the
       historical Options A / B, .is-hover screenshot hooks, page / body / header rules of the prototype documents);
     • the prototype's :root tokens are set on the Engagement components themselves (never on the site's :root), and
       every rule is namespaced by those components, so nothing outside them changes;
     • P4-71 — circular avatars (the member's avatar, else the initial; deleted member: a non-identifying placeholder);
     • P4-72 — failure toast with the red left accent (the existing .is-err rule) together with the inline Retry block;
     • P4-75 (F1) — no fixed width: the components fill the live Review column (1000 px / 24 px above 1024 px);
     • P4-76 (F2) — at phone widths 4 px on the byline icon group only;
     • Community UI stays English on Hindi pages (P4-32): the English fonts are set explicitly. */

/* ---------- tokens (prototype :root of review.css + thread.css, scoped) ---------- */
.bbe-mini-group, .bbe-panel, .bbx-comments, .bbe-gate-layer, .bbe-toast, .bbe-sr {
  --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-mini-group *, .bbe-panel *, .bbx-comments *, .bbe-gate-layer *, .bbe-toast * { box-sizing: border-box; }
.bbe-panel, .bbx-comments, .bbe-gate-layer { font-family: var(--f-body); color: var(--ink); }
/* 0.10.0 fidelity (P4-61 on the real page): the site's body typography (16.8 px / 300 / -0.1 px letter-spacing) is not
   inherited into the Engagement components — they start from P4-61's own base, exactly as in the frozen prototype. */
.bbe-mini-group, .bbe-panel, .bbx-comments, .bbe-gate-layer, .bbe-toast { font-size: 16px; font-weight: 400; line-height: normal; letter-spacing: normal; }
/* … nor the theme's 0.2 s transitions on links and form fields (P4-61: none). */
.bbe-mini-group a, .bbe-panel a, .bbe-gate-layer a, .bbx-comments a, .bbx-comments textarea { transition: none; }

/* ---------- shared icon + control parts (engagement.css) ---------- */
.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 100ms ease; }
.bbe-n { font-variant-numeric: tabular-nums; }
.bbe-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bbe-mini:focus-visible, .bbe-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.bbe-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; appearance: none; border: 2px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); cursor: pointer; text-decoration: none; font: 700 12px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; -webkit-tap-highlight-color: transparent; box-shadow: none; text-shadow: none; }
.bbe-btn .bbe-ico { width: 20px; height: 20px; }
/* 0.10.0 fidelity: the theme's global button:hover / button:focus (solid blue, white text) never reaches these controls —
   on touch devices a tapped button keeps P4-61's own colours; P4-61's hover colours (below, hover-capable devices only)
   and the pressed states still apply on top (later / more specific). */
.bbe-btn:is(:hover, :focus) { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.bbe-mini:is(:hover, :focus) { background: none; color: var(--ink); border-color: currentColor; }
.bbe-gate__x:is(:hover, :focus) { background: transparent; color: var(--ink); }
@media (hover: hover) { .bbe-btn:hover { background: #ffd203; color: var(--ink); } }
.bbe-btn--pri { background: #ffd203; }
@media (hover: hover) { .bbe-btn--pri:hover { background: var(--ink); color: #ffd203; } }
.bbe-btn[disabled] { background: #ecece6; color: #6e6e68; border-color: #a9a9a1; cursor: not-allowed; }
.bbe-btn .bbe-n::before { content: '·'; margin-right: 8px; }

/* ---------- OPTION C: minimal top (in the byline) + strong bottom panel ---------- */
.bbe-mini-group { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.bbe-mini { position: relative; display: inline-flex; align-items: center; gap: 5px; appearance: none; background: none; border: 0; border-radius: 0; padding: 0; margin: 0; cursor: pointer; color: var(--ink); text-decoration: none; font: 700 12px/1 var(--f-mono); letter-spacing: normal; text-transform: none; -webkit-tap-highlight-color: transparent; box-shadow: none; min-height: 0; }
.bbe-mini::before { content: ''; position: absolute; inset: -13px -13px; }
.bbe-mini .bbe-ico { width: 18px; height: 18px; }
@media (hover: hover) { .bbe-mini:hover { background: none; color: var(--ink); } }
@media (max-width: 767px) { .bbe-mini-group { gap: 28px; } .bbe-mini .bbe-ico { width: 20px; height: 20px; } }
/* P4-76 (F2): the live byline's column gap at phone widths is 8 px (P4-61: 12 px) — 4 px on the icon group only. */
@media (max-width: 767px) { .bbe-mini-group { padding-left: 4px; } }
/* 0.16.0: larger Like / Save / Comment icons in every Review byline (Spirit and Non-Spirit, English and Hindi) — 22 px on
   desktop, 24 px on phones. The negative block margin keeps each icon's layout box at the old 18 / 20 px, so the byline
   row, its dividers and the content below never move; the group gap shrinks 4 px to keep its width. */
.bb-review-byline .bbe-mini .bbe-ico { width: 22px; height: 22px; margin-block: -2px; }
.bb-review-byline .bbe-mini-group { gap: 24px; }
@media (max-width: 767px) { .bb-review-byline .bbe-mini .bbe-ico { width: 24px; height: 24px; margin-block: -2px; } .bb-review-byline .bbe-mini-group { gap: 24px; } }

.bbe-panel { margin: 36px 0 0; background: var(--callout); border: 2px solid var(--ink); padding: 22px 24px 24px; display: grid; grid-template-columns: 1fr auto; gap: 14px 24px; align-items: center; }
.bbe-panel__h { grid-column: 1 / -1; margin: 0; padding: 0; font: 400 26px/1.05 var(--f-display); text-transform: uppercase; color: var(--ink); letter-spacing: normal; }
.bbe-panel__t { margin: 0; font: 500 16px/1.5 var(--f-body); color: var(--deck); }
.bbe-panel__acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.bbe-panel .bbe-btn { min-height: 52px; font-size: 13px; padding: 0 18px; }
@media (max-width: 1024px) { .bbe-panel { grid-template-columns: 1fr; } .bbe-panel__acts { justify-content: flex-start; } }
@media (max-width: 767px) {
  .bbe-panel { padding: 18px 16px 18px; }
  .bbe-panel__h { font-size: 23px; }
  .bbe-panel__acts { display: grid; grid-template-columns: 1fr 1fr; }
  .bbe-panel__acts .bbe-btn--wide { grid-column: 1 / -1; }
}

/* ---------- toast (share-toast recipe) ---------- */
.bbe-toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: var(--ink); color: #fff; border-left: 4px solid #ffd203; font: 700 11px/1.4 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; padding: 9px 12px; max-width: calc(100% - 32px); z-index: 99; display: none; }
.bbe-toast.is-on { display: block; }

/* ---------- 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; }

/* ---------- ROUND 3: signed-in Like / Save ---------- */
[data-act="like"][aria-pressed="true"] .bbe-ico { color: var(--danger, #b3261e); fill: var(--danger, #b3261e); }
[data-act="save"][aria-pressed="true"] .bbe-ico { color: #0a0a0a; fill: #0a0a0a; }
.bbe-ico { transition: fill 120ms ease, transform 120ms ease; }
@media (hover: hover) { [data-act="like"]:hover .bbe-ico, [data-act="save"]:hover .bbe-ico { transform: scale(1.1); } }
@keyframes bbe-pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
.bbe-pulse .bbe-ico { animation: bbe-pop 240ms ease-out; }
.bbe-mini-group [aria-busy="true"], .bbe-panel [aria-busy="true"] { cursor: progress; }
@media (prefers-reduced-motion: reduce) { .bbe-pulse .bbe-ico { animation: none; } .bbe-ico { transition: none; } }
.bbe-toast.is-err { border-left-color: var(--danger, #b3261e); }

/* ROUND 3.1 active panel buttons */
.bbe-btn[data-act="like"][aria-pressed="true"] { background: #b3261e; border-color: #b3261e; color: #fff; }
.bbe-btn[data-act="save"][aria-pressed="true"] { background: #0a0a0a; border-color: #0a0a0a; color: #fff; }
.bbe-btn[data-act="like"][aria-pressed="true"] .bbe-ico,
.bbe-btn[data-act="save"][aria-pressed="true"] .bbe-ico { color: #fff; fill: #fff; }
@media (hover: hover) {
  .bbe-btn[data-act="like"][aria-pressed="true"]:hover { background: #c62828; border-color: #c62828; color: #fff; }
  .bbe-btn[data-act="save"][aria-pressed="true"]:hover { background: #5d5d58; border-color: #5d5d58; color: #fff; }
}
/* ROUND 3.2 final interaction colours */
@media (hover: hover) {
  .bbe-btn[data-act="like"]:not([aria-pressed="true"]):hover { background: #f6c7c2; border-color: var(--ink); color: var(--ink); }
  .bbe-btn[data-act="save"]:not([aria-pressed="true"]):hover { background: #dcdcd4; border-color: var(--ink); color: var(--ink); }
  .bbe-btn[data-act="like"][aria-pressed="true"]:hover { background: #d32f2f; border-color: #d32f2f; color: #fff; }
  .bbe-mini[data-act="like"]:not([aria-pressed="true"]):hover .bbe-ico { color: #b3261e; }
  .bbe-mini[data-act="like"][aria-pressed="true"]:hover .bbe-ico { color: #d32f2f; fill: #d32f2f; }
  .bbe-mini[data-act="save"]:not([aria-pressed="true"]):hover .bbe-ico { color: #5d5d58; }
  .bbe-mini[data-act="save"][aria-pressed="true"]:hover .bbe-ico { color: #5d5d58; fill: #5d5d58; }
}
/* ROUND 3.3 not-liked / not-saved hover */
@media (hover: hover) {
  .bbe-btn[data-act="like"]:not([aria-pressed="true"]):hover { background: #ffb4ab; border-color: var(--ink); color: var(--ink); }
  .bbe-btn[data-act="like"]:not([aria-pressed="true"]):hover .bbe-ico { color: #b3261e; fill: #b3261e; }
  .bbe-btn[data-act="save"]:not([aria-pressed="true"]):hover { background: #5d5d58; border-color: var(--ink); color: #fff; }
  .bbe-btn[data-act="save"]:not([aria-pressed="true"]):hover .bbe-ico { color: #0a0a0a; fill: #0a0a0a; }
}
/* ROUND 3.4 dimension stability */
.bbe-btn.bbe-stable { display: inline-grid; justify-items: center; align-items: center; }
.bbe-stable > .bbe-face, .bbe-stable > .bbe-ghost { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.bbe-stable > .bbe-ghost { visibility: hidden; }
.bbe-n[data-n="like"] { display: inline-block; text-align: left; min-width: calc(var(--bbe-digits, 3) * (1ch + 0.06em)); }
.bbe-btn .bbe-n[data-n="like"] { min-width: calc((var(--bbe-digits, 3) + 1) * (1ch + 0.06em) + 8px); }
@media (max-width: 359px) { .bbe-panel__acts { grid-template-columns: 1fr; } }

/* =====================================================================================================
   COMMENTS — e-refined thread.css + refined.css (unchanged rules, namespaced under .bbx-comments)
   ===================================================================================================== */
.bbx-comments .bbc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.bbx-comments .bbc-h { margin: 0; padding: 0; font: 400 26px/1.05 var(--f-display); text-transform: uppercase; display: flex; align-items: center; gap: 10px; color: var(--ink); letter-spacing: normal; }
.bbx-comments .bbc-count { font: 700 13px/1 var(--f-mono); background: var(--ink); color: var(--paper); padding: 5px 7px; }
.bbx-comments .bbc-stub { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 0; background: #fff; color: var(--muted); font: 400 15px/1.4 var(--f-body); margin: 0 0 8px; cursor: text; text-align: left; text-transform: none; letter-spacing: normal; box-shadow: none; }
.bbx-comments .bbc-threads { position: relative; }
.bbx-comments .bbc-links { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.bbx-comments .bbc-links path { fill: none; stroke: var(--link); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bbx-comments .bbc-links path.is-hot { stroke: var(--ink); stroke-width: 2; }
.bbx-comments .bbc-root { border-top: 1px solid var(--rule); padding: 14px 0 6px; }
.bbx-comments .bbc-root:first-child { border-top: 0; }
.bbx-comments .cm { position: relative; display: grid; grid-template-columns: var(--av, 24px) minmax(0, 1fr); column-gap: 8px; padding: 8px 0; border-radius: 0; }
.bbx-comments .cm.is-root { --av: 32px; column-gap: 10px; }
.bbx-comments .cm__av { width: var(--av, 24px); height: var(--av, 24px); background: var(--ink); color: var(--paper); display: grid; place-items: center; font: 400 calc(var(--av, 24px) * .5)/1 var(--f-display); text-transform: uppercase; position: relative; z-index: 1; }
.bbx-comments .cm__av.is-team { background: var(--yellow); color: var(--ink); font-size: calc(var(--av, 24px) * .42); }
.bbx-comments .cm__av.is-gone { background: var(--rule); color: var(--muted); }
.bbx-comments .cm__body { min-width: 0; }
.bbx-comments .cm__meta { display: flex; align-items: baseline; gap: 2px 8px; min-width: 0; flex-wrap: wrap; }
.bbx-comments .cm__who { font: 700 14px/1.3 var(--f-body); min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.bbx-comments .cm.is-root .cm__who { font-size: 15px; }
.bbx-comments .cm__time { font: 400 11px/1.3 var(--f-mono); color: var(--muted); white-space: nowrap; }
.bbx-comments .cm__text { margin: 3px 0 2px; padding: 0; font: 400 15px/1.5 var(--f-body); color: var(--prose); overflow-wrap: anywhere; }
.bbx-comments .cm.is-root .cm__text { font-size: 16px; }
.bbx-comments .cm__deleted { margin: 4px 0; padding: 0; font: italic 400 14px/1.4 var(--f-body); color: var(--muted); }
.bbx-comments .cm__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; margin-left: -2px; }
.bbx-comments .cm__acts button, .bbx-comments .bbc-ref, .bbx-comments .bbc-more, .bbx-comments .bbc-back { position: relative; appearance: none; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0 2px; min-height: 32px; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: var(--ink); font: 700 11px/1 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; -webkit-tap-highlight-color: transparent; margin: 0; }
.bbx-comments .cm__acts button::before, .bbx-comments .bbc-ref::before, .bbx-comments .bbc-more::before, .bbx-comments .bbc-back::before { content: ''; position: absolute; inset: -6px -6px; }
.bbx-comments .cm__acts svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.bbx-comments .cm__acts [aria-pressed="true"] svg { fill: var(--red); stroke: var(--red); }
.bbx-comments :is(.cm__acts button, .bbc-ref, .bbc-more, .bbc-back):focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.bbx-comments .bbc-ref::before { inset: -8px -6px; }
.bbx-comments .bbc-ref { min-height: 28px; max-width: 100%; margin: 2px 0 0 -2px; padding: 0 2px; color: var(--muted); text-transform: none; letter-spacing: 0; font: 400 12px/1.3 var(--f-mono); text-align: left; }
.bbx-comments .bbc-ref b { color: var(--ink); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bbx-comments .bbc-ref svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; }
@media (hover: hover) { .bbx-comments .bbc-ref:hover { background: none; color: var(--muted); } .bbx-comments .bbc-ref:hover b { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; } }
@keyframes bbc-flash { 0%, 60% { background: var(--flash); box-shadow: -6px 0 0 var(--flash), 6px 0 0 var(--flash); } 100% { background: transparent; box-shadow: none; } }
.bbx-comments .cm.is-flash { animation: bbc-flash 1600ms ease-out; }
.bbx-comments .cm.is-flash > .cm__av { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .bbx-comments .cm.is-flash { animation: none; background: var(--flash); } }
.bbx-comments .bbc-more { margin: 2px 0 4px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.bbx-comments .bbc-compose { grid-column: 2; margin: 6px 0 4px; border: 2px solid var(--ink); background: #fff; padding: 8px; display: grid; gap: 6px; }
.bbx-comments .bbc-compose span { font: 400 12px/1.3 var(--f-mono); color: var(--muted); }
.bbx-comments .bbc-compose span b { color: var(--ink); }
.bbx-comments .bbc-compose textarea { width: 100%; min-height: 64px; border: 2px solid var(--ink); border-radius: 0; padding: 8px; margin: 0; font: 400 15px/1.4 var(--f-body); resize: vertical; box-shadow: none; }
.bbx-comments .bbc-compose .row { display: flex; gap: 8px; justify-content: flex-end; }
.bbx-comments .bbc-compose .row button { min-height: 44px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); font: 700 12px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; box-shadow: none; margin: 0; }
.bbx-comments .bbc-compose .row .go { background: var(--yellow); }
.bbx-comments .bbc-back { margin: 0 0 8px; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.bbx-comments .cm.is-ancestor { opacity: .82; }
.bbx-comments .cm.is-ancestor .cm__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bbx-comments .cm.is-focus { background: #fffbe0; box-shadow: -8px 0 0 #fffbe0, 8px 0 0 #fffbe0; }
.bbx-comments .bbc-ref { flex-wrap: wrap; row-gap: 0; padding-top: 4px; padding-bottom: 4px; }
.bbx-comments .bbc-ref > span:not(.q) { white-space: nowrap; }
.bbx-comments .bbc-ref b { flex: 0 1 auto; }
/* refined.css */
.bbx-comments .bbr-sr { position: absolute; left: -9999px; }
.bbx-comments .bbr-sort { display: inline-flex; border: 2px solid var(--ink); background: #fff; margin: 0 0 10px; }
.bbx-comments .bbr-sort button { appearance: none; border: 0; border-right: 2px solid var(--ink); border-radius: 0; background: none; min-height: 44px; padding: 0 10px; margin: 0; font: 700 11px/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); cursor: pointer; box-shadow: none; }
.bbx-comments .bbr-sort button:last-child { border-right: 0; }
.bbx-comments .bbr-sort button[aria-pressed="true"] { background: var(--yellow); }
@media (hover: hover) { .bbx-comments .bbr-sort button:hover { color: var(--ink); } .bbx-comments .bbr-sort button:not([aria-pressed="true"]):hover { background: none; } }
.bbx-comments .bbr-more { display: block; width: 100%; min-height: 48px; margin: 10px 0 0; border: 2px solid var(--ink); border-radius: 0; background: #fff; font: 700 12px/1.2 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; color: var(--ink); box-shadow: none; padding: 0 12px; }
.bbx-comments :is(.bbr-sort button, .bbr-more):focus-visible, .bbx-comments .cm:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.bbx-comments .bbr-lim { margin-right: auto; align-self: center; font: 400 11px/1 var(--f-mono); color: var(--muted); }
.bbx-comments .cm__text { white-space: pre-line; }
.bbx-comments .cm__who { white-space: normal; overflow-wrap: anywhere; }
.bbx-comments .bbc-links path { stroke-linecap: round; }
.bbx-comments .bbc-ref b { white-space: normal; overflow-wrap: anywhere; }

/* =====================================================================================================
   INTEGRATION — integrated.css (unchanged rules; "PROPOSED" markers and prototype controls left out)
   ===================================================================================================== */
.bbx-comments { margin-top: 44px; scroll-margin-top: 16px; }
.bbx-comments .bbc-head { margin-bottom: 14px; }
.bbx-comments .bbx-compose textarea { min-height: 88px; }
.bbx-comments .bbx-rules { margin: 0; font: 400 11px/1.4 var(--f-mono); color: var(--muted); }
.bbx-comments .bbx-counter b { color: var(--ink); }
.bbx-comments .bbx-counter b.is-max { color: var(--red); }
.bbx-comments .bbx-status { margin: 0; font: 400 13px/1.4 var(--f-body); color: var(--ink); }
.bbx-comments .bbx-status.is-error { color: var(--red); }
.bbx-comments .bbx-retry { appearance: none; margin-left: 6px; min-height: 44px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 0; background: var(--yellow); color: inherit; font: 700 11px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; box-shadow: none; } /* 0.10.0 fidelity: the text takes the error colour of its line, as in P4-61 */
.bbx-comments .bbc-compose .row button:disabled { opacity: .45; cursor: not-allowed; }
.bbx-comments .bbx-empty, .bbx-comments .bbx-closed { border: 2px dashed var(--rule); padding: 18px 16px; margin: 0 0 12px; }
.bbx-comments .bbx-empty__h { margin: 6px 0 4px; padding: 0; font: 400 22px/1.05 var(--f-display); text-transform: uppercase; color: var(--ink); }
.bbx-comments .bbx-empty__t { margin: 0; font: 400 15px/1.5 var(--f-body); color: var(--muted); }
.bbx-comments .cm.is-pending > .cm__body { opacity: .78; }
.bbx-comments .cm.is-pending { outline: 2px dashed var(--rule); outline-offset: 2px; }
.bbx-comments .bbx-pending-tag { margin: 2px 0 0; font: 700 10px/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bbx-comments .bbx-more-nested { padding: 2px 0 8px; }
.bbx-comments .bbx-more-direct { margin: 6px 0 10px; }
/* REFINEMENT ROUND */
.bbx-comments .bbc-stub { background: var(--paper); }
.bbx-comments .bbc-stub:focus-visible { outline: 3px solid var(--yellow); outline-offset: 0; }
.bbx-comments .bbx-compose { border: 0; background: transparent; padding: 0; margin: 4px 0 12px; gap: 8px; }
.bbx-comments .bbx-compose textarea { background: var(--paper); border: 2px solid var(--ink); border-radius: 0; color: var(--ink); }
.bbx-comments .bbx-compose textarea:focus { outline: 3px solid var(--yellow); outline-offset: 0; }
.bbx-comments .bbx-compose .row button:focus-visible, .bbx-comments .bbx-retry:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.bbx-comments .cm:focus, .bbx-comments .cm:focus-visible { outline: none; }
.bbx-comments .cm.is-focus { outline: none; }
.bbx-comments .cm.bbx-kbd:focus { outline: 2px solid var(--muted); outline-offset: 2px; }
.bbx-comments .bbr-live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.bbx-comments .cm { padding: 6px 0; }
.bbx-comments .bbc-root { padding: 10px 0 4px; }
.bbx-comments .cm__text { font-size: 16px; margin: 2px 0 1px; }
.bbx-comments .cm.is-root .cm__text { font-size: 17px; }
.bbx-comments .cm__who { font-size: 15px; }
.bbx-comments .cm.is-root .cm__who { font-size: 16px; }
.bbx-comments .cm__time { font-size: 12px; }
.bbx-comments .cm__acts button { min-height: 30px; }
.bbx-comments .cm__acts button::before { inset: -7px -6px; }
@keyframes bbx-pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
.bbx-comments .bbx-clike.bbx-pop svg { animation: bbx-pop 240ms ease-out; }
@media (prefers-reduced-motion: reduce) { .bbx-comments .bbx-clike.bbx-pop svg { animation: none; } }
.bbx-comments .cm__meta { align-items: center; }
.bbx-comments .bbx-dots { position: relative; margin-left: auto; appearance: none; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0 4px; min-height: 22px; color: var(--muted); font: 700 16px/1 var(--f-body); letter-spacing: .05em; cursor: pointer; }
.bbx-comments .bbx-dots::before { content: ''; position: absolute; inset: -10px -8px; }
.bbx-comments .bbx-dots:hover, .bbx-comments .bbx-dots[aria-expanded="true"] { color: var(--ink); background: none; }
.bbx-comments .bbx-dots:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.bbx-comments .bbx-menu { position: absolute; right: 0; top: 30px; z-index: 5; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 2px 8px rgba(10, 10, 10, .12); padding: 3px 0; max-width: calc(100vw - 32px); }
.bbx-comments .bbx-menu button { display: block; width: 100%; min-height: 40px; padding: 0 12px; appearance: none; background: none; border: 0; border-radius: 0; box-shadow: none; margin: 0; text-align: left; white-space: nowrap; font: 700 11px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); cursor: pointer; transition: background-color 120ms ease; }
.bbx-comments .bbx-menu .bbx-menu__delete { color: var(--red); }
.bbx-comments .bbx-menu .bbx-menu__report { color: var(--ink); }
@media (hover: hover) { .bbx-comments .bbx-menu .bbx-menu__delete:hover { background: rgba(179, 38, 30, .08); color: var(--red); } .bbx-comments .bbx-menu .bbx-menu__report:hover { background: rgba(10, 10, 10, .06); color: var(--ink); } }
.bbx-comments .bbx-menu button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.bbx-comments .bbx-menu .bbx-menu__delete:focus-visible { background: rgba(179, 38, 30, .08); }
.bbx-comments .bbx-menu .bbx-menu__report:focus-visible { background: rgba(10, 10, 10, .06); }
.bbx-comments .bbx-menu button:disabled { color: var(--muted); cursor: default; background: none; }
.bbx-comments .bbx-panel { margin: 8px 0 4px; padding: 12px 0 0; border-top: 2px solid var(--ink); display: grid; gap: 8px; }
.bbx-comments .bbx-panel__h { margin: 0; font: 700 12px/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.bbx-comments .bbx-panel__n { margin: 0; font: 400 14px/1.45 var(--f-body); color: var(--muted); }
.bbx-comments .bbx-panel .row { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.bbx-comments .bbx-panel .row button { min-height: 44px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); font: 700 12px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; box-shadow: none; margin: 0; }
.bbx-comments .bbx-panel .row .go { background: var(--yellow); }
.bbx-comments .bbx-panel .row .bbx-danger { background: var(--ink); color: var(--paper); }
.bbx-comments .bbx-panel .row button:disabled { opacity: .45; cursor: not-allowed; }
.bbx-comments .bbx-panel .row button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.bbx-comments .bbx-reasons { border: 0; margin: 0; padding: 0; display: grid; gap: 2px; min-width: 0; }
.bbx-comments .bbx-reasons label { display: flex; align-items: center; gap: 10px; min-height: 40px; font: 400 15px/1.3 var(--f-body); color: var(--ink); cursor: pointer; margin: 0; }
.bbx-comments .bbx-reasons input { width: 18px; height: 18px; accent-color: var(--ink); margin: 0; }
.bbx-comments .bbx-reasons input:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
/* FOUR TARGETED CONTROLS */
.bbx-comments .bbx-load-replies { position: relative; appearance: none; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0 2px; margin: 0; min-height: 30px; display: inline-flex; align-items: center; cursor: pointer;
  color: var(--ink); font: 700 11px/1 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 4px;
  transition: text-decoration-color 150ms ease; -webkit-tap-highlight-color: transparent; }
.bbx-comments .bbx-load-replies::before { content: ''; position: absolute; inset: -7px -6px; }
@media (hover: hover) { .bbx-comments .bbx-load-replies:hover { text-decoration-color: var(--ink); } }
.bbx-comments .bbx-load-replies:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; text-decoration-color: var(--ink); }
.bbx-comments .bbx-load-comments { transition: background-color 150ms ease, color 150ms ease; }
@media (hover: hover) { .bbx-comments .bbx-load-comments:hover { background: var(--ink); color: #fff; } }
.bbx-comments .bbx-load-comments:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .bbx-comments .bbx-load-replies, .bbx-comments .bbx-load-comments, .bbx-comments .bbx-menu button { transition: none; } }
/* NESTED-CONVERSATION CONTROLS HIGHLIGHT */
.bbx-comments .cm__acts [data-c-branch], .bbx-comments .bbx-load-replies { isolation: isolate; color: var(--ink); text-decoration: none; }
.bbx-comments .cm__acts [data-c-branch]::after, .bbx-comments .bbx-load-replies::after {
  content: ''; position: absolute; z-index: -1; left: -4px; right: -4px; top: 50%; height: 22px; transform: translateY(-50%);
  background: var(--yellow); transition: background-color 150ms ease; pointer-events: none; }
@media (hover: hover) {
  .bbx-comments .cm__acts [data-c-branch]:hover, .bbx-comments .bbx-load-replies:hover { color: var(--yellow); text-decoration: none; }
  .bbx-comments .cm__acts [data-c-branch]:hover::after, .bbx-comments .bbx-load-replies:hover::after { background: var(--ink); }
}
.bbx-comments .cm__acts [data-c-branch]:focus-visible, .bbx-comments .bbx-load-replies:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .bbx-comments .cm__acts [data-c-branch]::after, .bbx-comments .bbx-load-replies::after { transition: none; } }
/* COMMENT ACTION HIGHLIGHTS */
.bbx-comments .cm__acts [data-c-open] { isolation: isolate; color: var(--ink); }
.bbx-comments .cm__acts [data-c-open]::after { content: ''; position: absolute; z-index: -1; left: -4px; right: -4px; top: 50%; height: 22px; transform: translateY(-50%); background: var(--yellow); transition: background-color 150ms ease; pointer-events: none; }
@media (hover: hover) { .bbx-comments .cm__acts [data-c-open]:hover { color: var(--yellow); } .bbx-comments .cm__acts [data-c-open]:hover::after { background: var(--ink); } }
.bbx-comments .cm__acts [data-c-open]:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.bbx-comments .cm__acts [data-c-reply] { isolation: isolate; color: #fff; }
.bbx-comments .cm__acts [data-c-reply]::after { content: ''; position: absolute; z-index: -1; left: -4px; right: -4px; top: 50%; height: 22px; transform: translateY(-50%); background: var(--ink); transition: background-color 150ms ease; pointer-events: none; }
@media (hover: hover) { .bbx-comments .cm__acts [data-c-reply]:hover { color: #fff; } .bbx-comments .cm__acts [data-c-reply]:hover::after { background: #3d3d3a; } }
.bbx-comments .cm__acts [data-c-reply]:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .bbx-comments .cm__acts [data-c-open]::after, .bbx-comments .cm__acts [data-c-reply]::after { transition: none; } }
/* REPLIES VIEW NAVIGATION REFINEMENT */
.bbx-comments [data-c-back] { font-size: 13px; margin-bottom: 3px; }
.bbx-comments .bbc-head:has(+ [data-c-back]) { margin-bottom: 10px; }
/* plain buttons in the thread keep their own look whatever the site theme does on hover / focus */
@media (hover: hover) { .bbx-comments .cm__acts button:not([data-c-open]):not([data-c-reply]):not([data-c-branch]):hover, .bbx-comments .bbc-back:hover, .bbx-comments .bbc-stub:hover { background: none; color: var(--ink); } .bbx-comments .bbc-stub:hover { background: var(--paper); color: var(--muted); } }

/* =====================================================================================================
   P4-71 — circular avatars (the only change to the avatar: its shape; same place and size)
   ===================================================================================================== */
.bbx-comments .cm__av { border-radius: 50%; overflow: hidden; }
.bbx-comments .cm__av svg { display: block; width: 100%; height: 100%; }
.bbx-comments .cm.is-flash > .cm__av { outline-offset: 2px; }
/* P4-90: "Deleted member" label */
.bbx-comments .cm__who.is-gone { font-style: italic; font-weight: 600; color: var(--muted); }

/* 0.12.0 (Phase 4 Update 4, P4-109 — Owner TEAM correction): the official BARREL BROZ · TEAM identity = "Barrel Broz" +
   the ORIGINAL integrated-design TEAM badge (yellow, Space Mono 700 10px, .08em, 3px 5px — no outline, no border) + the
   site's own beer-glass cursor artwork as the avatar (team-avatar.svg, the exact live bytes), on a transparent background. */
.bbx-comments .cm__team { font: 700 10px/1 var(--f-mono); letter-spacing: .08em; background: var(--yellow); color: var(--ink); padding: 3px 5px; border: 0; }
.bbx-comments .cm__av.is-team-glass { background: transparent; }
.bbx-comments .cm__av.is-team-glass img { width: 100%; height: 100%; object-fit: contain; display: block; }