/*!
 * Altrenyx Brand Reviews -- assets/css/brand-reviews.css
 *
 * SCOPE: STAGING ONLY (tbalt.altrenyx.com). Paid add-on, quoted separately; not
 * part of the agreed site build. Must not be deployed, merged or mirrored to
 * tropika.my -- exclude this folder from any staging -> production sync.
 *
 * A direct port of docs/reference.html's <style> block, with exactly two
 * structural changes (ARCHITECTURE.md section 13):
 *   1. The custom properties move from :root onto .br-scope, so the tokens
 *      cannot leak into Astra or Elementor. No token renamed, none revalued.
 *   2. A short reset guard, scoped to .br-scope only, survives Astra's and
 *      Elementor's button styling. It sits BEFORE the component rules so the
 *      component rules still win on specificity ties.
 * Colours, radii, fonts, spacing and the 834px / 520px breakpoints are verbatim.
 */

/* -- Tokens -- the reference's :root, scoped ------------------------------- */
.br-scope{
  --ink:#1C140F; --ink-soft:#6B5A4D; --ink-faint:#A6968A;
  --surface:#FFFFFF; --surface-sunk:#F7F1E9;
  --line:#E9DFD3; --line-strong:#D8C9B8;
  --brand:#734827; --brand-dark:#5A3820; --brand-soft:#F1E4D8; --on-brand:#FFFFFF;
  --accent:#FB931F; --btn-primary-bg:#FB931F;
  --font:'Avenir','Avenir Next','Poppins','Segoe UI',Helvetica,Arial,sans-serif;
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-full:999px;
  --container:1280px;
}

/* The reference's body{} rule, scoped. A plugin must not restyle the site body,
   so only the inherited typography is ported -- the components rely on it via
   font-family:inherit. body's own margin:0 and background:#fff are not ported. */
.br-scope{ color:var(--ink); font-family:var(--font); line-height:1.6; }

/* -- Reset guard -- .br-scope only, before the component rules -------------
   The button rule is written `.br-scope :where(button)` on purpose. Plain
   `.br-scope button` scores (0,1,1) and so OUT-RANKS every component class
   below it -- it strips .br-primary's background, .br-outline's border,
   .br-pill's colour and so on, whatever the source order. :where() drops the
   pseudo-class to zero, leaving (0,1,0): still ahead of Astra's and
   Elementor's type-level `button{}` rules, but a tie with the component
   classes, which then win on source order exactly as intended. Declarations
   are unchanged from the contract. */
.br-scope,.br-scope *,.br-scope *::before,.br-scope *::after{ box-sizing:border-box; }
.br-scope :where(button){ font:inherit; color:inherit; background:none; border:0; margin:0; padding:0; text-align:inherit; }

/* -- Ported component rules ----------------------------------------------- */
/* Breadcrumb -- artboard: container width, 24px above, xs text, current crumb in ink at 600. */
.br-crumb{ max-width:var(--container); margin:0 auto; padding:24px 56px 0;
           display:flex; align-items:center; gap:8px; flex-wrap:wrap;
           font-size:.8125rem; color:var(--ink-soft); }
/* Scoped through .br-scope: the site's own content-link rule (brand colour + underline)
   otherwise wins on the crumb, which the artboard renders in ink-soft with no underline. */
.br-scope .br-crumb a{ color:var(--ink-soft); text-decoration:none; }
.br-scope .br-crumb a:hover{ color:var(--brand); text-decoration:none; }
.br-crumb-sep{ color:var(--line-strong); }
.br-crumb [aria-current="page"]{ color:var(--ink); font-weight:600; }

.br-section{ max-width:var(--container); margin:0 auto; padding:48px 56px; }
/* FIXES-3 H2: the homepage is the roomier variant of this same section -- the artboard's
   secPad is 96px down to 520px and 48px below it, where the wall's 48 / 32 above is
   correct and stays. Only the vertical padding differs, so the modifier sets the two
   longhands and .br-section keeps owning the 56 / 42 / 20px gutters. Both breakpoint
   blocks at the foot of this file re-declare .br-section with the `padding` SHORTHAND,
   which resets those longhands on equal specificity and later source order -- hence the
   matching modifier lines there. */
.br-section--home{ padding-top:96px; padding-bottom:96px; }
.br-head{ text-align:center; margin-bottom:32px; }
.br-eyebrow{ display:block; font-size:.6875rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--brand); margin-bottom:8px; }
/* FIXES-2 A: the wall's page heading is an <h1> at 72 / 60 / 44px on the artboard.
   .br-h2 below is NOT that heading -- the homepage section keeps 52 / 45 / 36px --
   so this is a new rule, not an edit to .br-h2. Same margin rhythm and weight as
   .br-h2; the artboard's own tracking here is -.01em, not .br-h2's -.008em. */
.br-h1{ font-weight:300; font-size:72px; line-height:1.12; letter-spacing:-.01em; margin:24px 0 0; text-wrap:balance; }
.br-h2{ font-weight:300; font-size:52px; line-height:1.12; letter-spacing:-.008em; margin:0 0 12px; }
.br-lede{ font-size:1.1875rem; color:var(--ink-soft); max-width:56ch; margin:0 auto; text-wrap:pretty; }
/* FIXES-3 W1 + W2: the wall header alone. The artboard measures its lede at 58ch, where
   56ch above is the homepage's, and its rhythm is eyebrow (no bottom margin) / h1
   `24px 0 0` / lede `24px auto 0` -- so the gaps are 24px and 24px, not 8px and 12px.
   .br-h1 is the wall's own heading class (it exists for that hero and nothing else), so
   its margin is corrected in place above; this adjacent-sibling rule then carries the
   lede, and the homepage's `.br-h2 + .br-lede` pairing is left untouched at 56ch / 0.
   The eyebrow's own 8px bottom margin is deliberately NOT zeroed: .br-head is a plain
   block, so that 8px collapses with the h1's 24px top margin and the rendered gap is
   the artboard's 24px either way. Zeroing it globally would close the homepage's 8px,
   and there is no previous-sibling selector to scope it to the wall. */
.br-h1 + .br-lede{ max-width:58ch; margin:24px auto 0; }

/* Score summary */
.br-summary{ display:flex; gap:32px; align-items:center; border:1px solid var(--line);
             border-radius:var(--r-lg); padding:32px; background:var(--surface-sunk); }
.br-score{ flex:none; text-align:center; }
.br-score-num{ font-weight:300; font-size:68px; line-height:1; font-variant-numeric:tabular-nums; }
.br-stars{ display:flex; gap:2px; color:var(--accent); }
.br-hist{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:8px; }
.br-hist-row{ display:flex; align-items:center; gap:12px; }
.br-hist-row span:first-child{ flex:none; width:34px; font-size:.8125rem; font-weight:700; color:var(--ink-soft); }
.br-bar{ flex:1 1 0; height:8px; border-radius:var(--r-full); background:var(--line); overflow:hidden; }
.br-bar i{ display:block; height:100%; background:var(--accent); border-radius:var(--r-full); }
.br-hist-row span:last-child{ flex:none; width:40px; text-align:right; font-size:.8125rem; color:var(--ink-faint); font-variant-numeric:tabular-nums; }

.br-primary{ display:inline-flex; align-items:center; justify-content:center; height:52px; padding:0 32px; border:none;
             border-radius:var(--r-md); background:var(--btn-primary-bg); color:#fff; font-family:inherit;
             font-weight:700; font-size:.9375rem; text-decoration:none; cursor:pointer; white-space:nowrap; }
.br-primary[disabled],.br-primary[data-ready="0"]{ background:var(--line-strong); cursor:not-allowed; }
.br-outline{ display:inline-flex; align-items:center; justify-content:center; height:52px; padding:0 32px;
             border:1px solid var(--line-strong); border-radius:var(--r-md); background:transparent; color:var(--ink);
             font-family:inherit; font-weight:700; font-size:.9375rem; cursor:pointer; }
.br-note{ font-size:.6875rem; color:var(--ink-faint); line-height:1.5; max-width:26ch; }

/* Slot pills (account) */
.br-slots{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; }
.br-slot{ display:inline-flex; align-items:center; height:32px; padding:0 16px; border:1px solid var(--line-strong);
          border-radius:var(--r-full); font-size:.6875rem; font-weight:700; color:var(--ink-faint); }
.br-slot[data-state="unlocked"]{ background:var(--brand-soft); border-color:var(--brand); color:var(--brand); }
.br-slot[data-state="written"]{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); }

/* Inline form */
.br-form{ max-width:760px; margin:0 auto; border:1px solid var(--line-strong); border-radius:var(--r-lg);
          padding:32px; background:var(--surface); }
/* FIXES-3 A7 + A10: the account form is the compact variant of this same box. It fills
   the account column instead of sitting in a centred 760px measure, is padded 48px
   (24px at <=520px, restated in that block), and shrinks the rating buttons to 44px
   while GROWING the photo slots to 92px at every width -- the wall's slots are 108px
   until mobile. Equal specificity to .br-form, so this rule must stay after it. The
   22px star inside the 44px button is sized by partial-form.php, not from here. */
.br-form--account{ max-width:none; margin:0; padding:48px; }
.br-form--account .br-star{ width:44px; height:44px; }
.br-form--account .br-slot-photo{ width:92px; height:92px; }
.br-form-head{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:24px; }
.br-h3{ font-weight:400; font-size:1.5rem; line-height:1.2; margin:0 0 8px; }
.br-badge{ display:inline-flex; align-items:center; gap:8px; height:26px; padding:0 12px; border-radius:var(--r-full);
           background:var(--brand-soft); color:var(--brand); font-size:.6875rem; font-weight:700;
           letter-spacing:.04em; text-transform:uppercase; }
.br-close{ flex:none; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
           border:1px solid var(--line-strong); border-radius:var(--r-full); background:transparent;
           color:var(--ink-soft); cursor:pointer; }
.br-label{ display:block; font-weight:700; font-size:.9375rem; margin-bottom:12px; }
.br-label small{ font-weight:600; color:var(--ink-faint); }

.br-rating{ display:flex; gap:8px; margin-bottom:32px; }
.br-star{ display:flex; align-items:center; justify-content:center; width:48px; height:48px;
          border:1px solid var(--line-strong); border-radius:var(--r-md); background:transparent;
          color:var(--ink-faint); cursor:pointer; }
.br-star[aria-pressed="true"]{ background:var(--brand-soft); border-color:var(--brand); color:var(--accent); }

.br-textarea{ width:100%; border:1.5px solid var(--line-strong); border-radius:var(--r-md); background:var(--surface);
              padding:16px; font-family:inherit; font-size:.9375rem; color:var(--ink); line-height:1.6; resize:vertical; }
.br-count{ font-size:.6875rem; color:var(--ink-faint); margin:8px 0 32px; }

.br-photos{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:32px; }
.br-slot-photo{ position:relative; width:108px; height:108px; padding:0; border:1.5px dashed var(--line-strong);
                border-radius:var(--r-md); background:transparent; color:var(--ink-faint);
                display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; }
.br-slot-photo[data-filled="1"]{ border-style:solid; border-color:var(--brand); background:var(--surface-sunk); }
.br-slot-photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.br-slot-photo span{ display:flex; flex-direction:column; align-items:center; gap:8px; font-size:.6875rem; font-weight:700; }
.br-fine{ font-size:.6875rem; color:var(--ink-faint); margin:16px 0 0; line-height:1.6; }

/* Filters + grid */
.br-controls{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-bottom:32px; }
.br-pills{ display:flex; flex-wrap:wrap; gap:8px; }
.br-pill{ display:inline-flex; align-items:center; height:38px; padding:0 16px; border:1px solid var(--line-strong);
          border-radius:var(--r-full); background:transparent; color:var(--ink-soft);
          font-family:inherit; font-weight:700; font-size:.8125rem; cursor:pointer; }
/* The filter and sort pills are aria-pressed toggle buttons in a role="group"
   (FIXES.md G+H); the account sub-tabs are a real tablist and keep aria-selected.
   Both spellings share this one rule -- selector addition only, no declaration
   changed, so the painted pill is byte-identical either way. */
.br-pill[aria-selected="true"],
.br-pill[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); }

/* FIXES-3 A1: the account sub-tabs are underlined text tabs on the artboard, not pills.
   They are still a real tablist -- the markup keeps role="tab" and aria-selected and the
   script keeps writing aria-selected -- so the selected state hangs off that attribute,
   exactly as .br-pill's does. This is a separate pair of classes and not a .br-pill
   modifier because the wall's filter and sort rows are still pills and must not move.
   `border:none` before `border-bottom` so the 2px transparent rail survives the reset;
   the -1px bottom margin is what sits that rail on top of the container's own line. */
.br-subtabs{ display:flex; gap:32px; border-bottom:1px solid var(--line); margin-bottom:32px; }
.br-subtab{ padding:0 0 16px; border:none; border-bottom:2px solid transparent; margin-bottom:-1px;
            background:none; color:var(--ink-soft); font-family:inherit; font-weight:600;
            font-size:.9375rem; cursor:pointer; }
.br-subtab[aria-selected="true"]{ border-bottom-color:var(--brand); color:var(--brand); font-weight:700; }

.br-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
/* FIXES-3 H3: 32px between homepage cards, 24px between the wall's. Both fall to the
   16px of the <=520px block, which is restated there for this selector -- two classes
   out-rank one whatever media query the one-class rule is written in. */
.br-section--home .br-grid{ gap:32px; }
.br-card{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-lg);
          padding:32px; background:var(--surface); }
/* FIXES-3 H4: the homepage card is padded 24px at every breakpoint; the wall keeps 32px. */
.br-section--home .br-card{ padding:24px; }
/* FIXES-3 A10 / A11 / A8: the account card is the roomy variant -- 48px of padding
   (24px at <=520px, restated in that block), a tenure line at .8125rem in ink-soft
   instead of the wall's .6875rem ink-faint, an avatar on brand-soft instead of
   surface-sunk, and the standalone actions row at 16px instead of the .br-actions
   default of 12px. Every one is scoped through the modifier, so the base .br-card,
   .br-tenure, .br-avatar and .br-actions rules -- all of them the wall's -- are untouched. */
.br-card--account{ padding:48px; }
.br-card--account .br-tenure{ font-size:.8125rem; color:var(--ink-soft); }
.br-card--account .br-avatar{ background:var(--brand-soft); }
.br-card--account .br-actions{ gap:16px; }
/* flex-wrap per FIXES-3 A4: the account card adds the PUBLISHED badge as a third child
   of this row. Nothing else wraps -- avatar plus name block always fit -- so the wall
   and homepage identity rows paint exactly as before. */
.br-who{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:16px; }
.br-avatar{ flex:none; display:flex; align-items:center; justify-content:center; width:44px; height:44px;
            border-radius:var(--r-full); background:var(--surface-sunk); color:var(--brand); font-weight:700; font-size:.9375rem; }
.br-name{ font-weight:700; font-size:.9375rem; }
.br-tenure{ font-size:.6875rem; color:var(--ink-faint); margin-top:2px; }
.br-body{ font-size:.9375rem; color:var(--ink-soft); line-height:1.7; margin:0 0 16px; text-wrap:pretty; }
/* flex-wrap added per FIXES.md W: three 64px thumbs overflow the two-up card
   between 521px and ~655px and give the page a horizontal scrollbar. Wrapping
   adds no new value and changes nothing at widths where the row already fits. */
.br-thumbs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.br-thumbs img{ width:64px; height:64px; border-radius:var(--r-sm); object-fit:cover; background:var(--surface-sunk); }
.br-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px;
          border-top:1px solid var(--line); padding-top:16px; margin-top:auto; }
.br-when{ font-size:.6875rem; color:var(--ink-faint); }
/* FIXES-3 A8: on the account card the posted / edited line is a standalone paragraph
   sitting above the actions row -- no rule over it and no space-between, which is why
   it is outside .br-foot rather than a modifier of it. .br-foot is the wall's and stays. */
.br-when--block{ display:block; margin:0 0 16px; }
.br-helpful{ display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 16px;
             border:1px solid var(--line-strong); border-radius:var(--r-full); background:transparent;
             color:var(--ink-soft); font-family:inherit; font-weight:700; font-size:.6875rem; cursor:pointer; }
.br-helpful[aria-pressed="true"]{ background:var(--brand-soft); border-color:var(--brand); color:var(--brand); }
.br-reply{ margin-top:16px; border-radius:var(--r-md); background:var(--brand-soft); padding:16px; }
.br-reply-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.br-reply-avatar{ flex:none; display:flex; align-items:center; justify-content:center; width:26px; height:26px;
                  border-radius:var(--r-full); background:var(--brand); color:var(--on-brand); font-weight:700; font-size:.6875rem; }
.br-reply p{ font-size:.8125rem; color:var(--brand-dark); line-height:1.7; margin:0; }

.br-locked{ max-width:760px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:16px;
            border:1px solid var(--line-strong); border-radius:var(--r-lg); padding:32px; background:var(--surface-sunk); }

/* -- Named classes replacing the reference's inline style="" attributes --
   Declarations are identical to the inline styles they replace; the comment on
   each names the reference line it came from. No new values are introduced. */
.br-home-score{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:32px; margin-bottom:32px; }  /* home score row */
.br-readall{ display:inline-flex; align-items:center; gap:8px; color:var(--brand); font-weight:700; font-size:.9375rem; text-decoration:none; }  /* Read All {n} Reviews link */
/* FIXES-3 A9: the account card's two links are .8125rem, not .br-readall's .9375rem.
   Edit My Review is brand with no underline, See It On The Reviews Wall is ink-soft and
   underlined at a 3px offset. The 700 is the weight they already carried from
   .br-readall -- A9 changes size, colour and underline only. .br-readall itself is
   unchanged and still carries the homepage's Read All link. */
.br-cardlink{ font-size:.8125rem; font-weight:700; color:var(--brand); text-decoration:none; }
.br-cardlink--muted{ color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px; }
.br-summary-cta{ flex:none; display:flex; flex-direction:column; gap:12px; align-items:center; }  /* summary card button + note column */
.br-form-note{ font-size:.9375rem; color:var(--ink-soft); margin:0 0 32px; line-height:1.7; }  /* slot note under the form heading */
/* FIXES-3 A13: the brand-tab intro copy, which was borrowing .br-form-note -- whose 32px
   bottom margin and uncapped measure belong to the form's slot note, not to a paragraph
   of running text. Colour is unchanged from that rule: A13 moves size, margin, measure
   and leading only. */
.br-tab-intro{ font-size:.9375rem; color:var(--ink-soft); margin:0 0 24px; max-width:60ch; line-height:1.6; text-wrap:pretty; }
.br-photo-help{ font-size:.6875rem; color:var(--ink-faint); margin:0 0 12px; line-height:1.6; }  /* photo guidance line */
.br-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }  /* Publish / Cancel row */
.br-loadmore{ display:flex; justify-content:center; margin-top:48px; }  /* Load More Reviews wrapper */
/* FIXES-2 D: on the artboard the Load More button is 52px tall with padding
   0 48px, while the form's Cancel button -- same height, same .br-outline -- keeps
   0 32px. .br-loadmore is ALREADY the wrapper <div> here (rule above; the script
   also resolves it with closest() to hide the button), so the widened padding
   cannot be hung on .br-loadmore itself without restyling that wrapper. It is
   written as a descendant instead: same effect, no markup change, .br-outline
   untouched at 32px everywhere else. */
.br-loadmore .br-outline{ padding:0 48px; }
/* FIXES-3 H5: the homepage photo row leaves 16px under it, the wall's .br-thumbs 24px.
   Equal specificity to .br-thumbs and later in source, and both classes are on the one
   element. The 60px thumbnail size below is unchanged. */
.br-thumbs--home{ margin-bottom:16px; }
.br-thumbs--home img{ width:60px; height:60px; }  /* homepage cards use 60px thumbs */
/* height per FIXES-2 E: 24px on a review card, .br-badge's 26px stays for the form.
   Same specificity as .br-badge, later in source order, so this wins on the card. */
.br-badge--card{ align-self:flex-start; margin-bottom:12px; height:24px; }  /* Verified Customer badge inside a card */
/* FIXES-3 A4: the account card's PUBLISHED badge, now the last child of the identity row
   rather than a block of its own beneath it -- 28px tall against .br-badge's 26px, and
   held to its own width in that flex row. margin:0 is what clears the 12px bottom margin
   for the case where .br-badge--card is also present (it must therefore stay after that
   rule); the auto left margin is what pushes the badge to the end of the row. */
.br-badge--status{ flex:none; height:28px; margin:0; margin-left:auto; }
.br-card-stars{ margin-bottom:12px; }  /* star-row wrapper; the 12px the card's .br-stars carried inline in reference.html */

/* -- Ported breakpoints --------------------------------------------------- */
@media (max-width:834px){
  .br-section{ padding:48px 42px; } .br-crumb{ padding:24px 42px 0; } .br-h1{ font-size:60px; } .br-h2{ font-size:45px; }
  /* FIXES-3 H2: the artboard's secPad is mobile-only, so the homepage section is still
     96px here. Repeated because the shorthand above resets the two longhands. */
  .br-section--home{ padding-top:96px; padding-bottom:96px; }
  .br-summary{ flex-direction:column; align-items:stretch; } .br-score{ text-align:left; } .br-stars{ justify-content:flex-start; }
  .br-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px){
  .br-section{ padding:32px 20px; } .br-crumb{ padding:20px 20px 0; } .br-h1{ font-size:44px; } .br-h2{ font-size:36px; }
  .br-score-num{ font-size:56px; }  /* FIXES-2 C: artboard scoreSize is 68px above this breakpoint, 56px on mobile */
  .br-summary,.br-form,.br-card,.br-locked{ padding:24px; }
  .br-grid{ grid-template-columns:1fr; gap:16px; }
  .br-slot-photo{ width:92px; height:92px; }

  /* FIXES-3 H2 / H3 / H6 / A10 -- the mobile halves of the two variants.
     H6 is the only new value here: the homepage score row closes from 32px to 16px,
     keeping its 32px bottom margin. The other three restate values this block already
     applies, because their selectors out-rank the rules above -- .br-section--home is
     reset by .br-section's shorthand, and the two-class grid and box selectors out-rank
     the one-class rules whatever media query those are written in. */
  .br-section--home{ padding-top:48px; padding-bottom:48px; }
  .br-section--home .br-grid{ gap:16px; }
  .br-home-score{ gap:16px; }
  .br-card--account,.br-form--account{ padding:24px; }

  /* SPEC section 7 (Design standards) states two things that pull against each
     other at 390px: it fixes the component heights -- 38px for the close button,
     34px for Helpful -- AND requires 44px+ hit targets on this viewport.
     The painted size and the tap target are therefore deliberately different
     here: the control keeps its specified
     38px/34px box and a transparent, absolutely positioned ::after centred on it
     carries the 44px touch area. Being out of flow it cannot move or resize
     anything, and having no background it paints nothing -- the control looks
     byte-identical and only the area a finger may land on grows. Mobile only. */
  .br-close,.br-helpful{ position:relative; }
  .br-close::after,.br-helpful::after{ content:""; position:absolute; inset:50% auto auto 50%;
                                       transform:translate(-50%,-50%); width:44px; height:44px; }
}

/* -- Plugin-only additions (no new design values) ------------------------- */
.br-scope a:focus-visible,
.br-scope button:focus-visible,
.br-scope input:focus-visible,
.br-scope textarea:focus-visible,
.br-scope [tabindex]:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

.br-is-hidden{ display:none; }
.br-scope[hidden],.br-scope [hidden]{ display:none !important; }

/* Inline AJAX error, styled from the staff-reply block's existing values. */
.br-error{ margin-top:16px; border-radius:var(--r-md); background:var(--brand-soft);
           padding:16px; font-size:.8125rem; color:var(--brand-dark); line-height:1.7; }

@media (prefers-reduced-motion: reduce){
  .br-scope,.br-scope *,.br-scope *::before,.br-scope *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}