/**
 * Trust Badge component — the saved-badge visual (chip / card / medal).
 *
 * Ported from the design rock's badge-builder-v3.html, class names namespaced
 * under `sbr-tb-` and custom properties under `--sbr-tb*`: this markup renders
 * OUTSIDE the feed container, where `sbr-styles` scoping does not reach, so it
 * carries its own namespace rather than borrowing one (see the badge CSS note
 * in the SBR-163 handoff).
 *
 * Depends on design-tokens/sb-tokens.css for every `--sb-*` value it reads.
 * Enqueue that first or the palette falls back to the browser's initial values.
 *
 * The three themes and the tinted derivation are the design's, unchanged —
 * tinted computes its whole palette from one hue, which is why it stays in
 * oklch() rather than resolving to a token.
 */

/* ============================================================
   The Trust Badge component (the actual product) — new badge
   design ported from prototypes/badge-gallery.html.
   Palette authored in oklch; three themes (light/dark/tinted).
   The sidebar accent drives ONLY the star color.
   ============================================================ */
.sbr-tb-badge {
  /* Light theme — these were token values transcribed to oklch by hand;
     now bound directly. */
  --sbr-tbb-surface: var(--sb-color-white);        /* was oklch(1 0 0) — same colour */
  --sbr-tbb-ink: var(--sb-color-gray-900);         /* was oklch(0.21 0.034 264) — same colour */
  --sbr-tbb-muted: var(--sb-color-gray-500);       /* was oklch(0.551 0.027 264) — same colour */
  --sbr-tbb-line: rgba(0, 0, 0, 0.1);              /* translucent ink — no alpha border token */
  --sbr-tbb-foot: var(--sb-color-gray-50);         /* was oklch(0.985 0.002 248) — same colour */
  --sbr-tbb-star-base: var(--sb-color-gray-200);   /* was oklch(0.928 0.006 264) — same colour */
  display: inline-flex; flex-direction: column; align-items: stretch;
  background: var(--sbr-tbb-surface); color: var(--sbr-tbb-muted);
  border: var(--sb-border-width-1) solid var(--sbr-tbb-line); font-family: var(--sb-font-sans);
  font-size: var(--sb-font-size-sm); line-height: var(--sb-line-height-snug) /* was 1.4 */;
  overflow: hidden; /* clip footer tint to the radius */
}
.sbr-tb-badge[data-theme=dark] {
  /* Back to the design's lighter dark surface, and the reason is worth stating
     because it reverses a change that had a good argument.

     v3 darkened this to gray-800 explicitly BECAUSE it had removed the logo
     chips: "with the chips gone the marks stand on this surface directly", and
     the darker step moved four brand marks from failing 3:1 to passing. That
     argument holds only while the marks touch the surface. With the chips
     restored, each mark sits on its own lightened tint inside a ring, so the
     contrast that mattered is chip-to-mark, not surface-to-mark — and the
     darker surface just makes the badge heavier than the design draws it.

     Two linked decisions; taking one without the other is what left this
     mismatched. */
  --sbr-tbb-surface: #3a4150;                      /* oklch(0.367 0.02 266) — see the @supports below */
  --sbr-tbb-ink: var(--sb-color-white);            /* was oklch(1 0 0) — same colour */
  --sbr-tbb-muted: var(--sb-color-gray-400);       /* was oklch(0.75 0.018 264) — a step darker */
  --sbr-tbb-line: rgba(255, 255, 255, 0.14);       /* translucent white — no alpha border token */
  --sbr-tbb-foot: rgba(255, 255, 255, 0.05);       /* translucent white — no alpha token */
  --sbr-tbb-star-base: var(--sb-color-gray-600);   /* was oklch(0.48 0.025 262) */
}
/* Tinted: every shade derived from one hue (--sbr-tb-tint-h); stars go white.
   Parameterised on the user's hue — cannot bind to any static token;
   stays computed by design. */
.sbr-tb-badge[data-theme=tinted] {
  --sbr-tbb-h: var(--sbr-tb-tint-h, 250);
  /* Static first. Every value in this theme is derived from a user-chosen
     hue, so there is no hex equivalent — but an unsupported oklch() is
     invalid at computed-value time, which is a value, so the var() fallbacks
     downstream never fire and the badge renders white ink on nothing. These
     are the hue-250 defaults, computed with the plugin's own converter, so a
     browser without oklch gets the design's blue rather than a hole.
     sb-tokens.css guards its own oklch the same way. */
  --sbr-tbb-surface: #00579a;
  --sbr-tbb-ink: var(--sb-color-white);
  --sbr-tbb-muted: #c4daf2;
  --sbr-tbb-line: #3275b4;
  --sbr-tbb-foot: #004b8d;
  --sbr-tbb-star-base: #437eb9;
  /* The white this theme's own header promises. It was never declared, so the
     `var(--sbr-tb-star, var(--sbr-tbb-star-fill, gold))` chain below fell through
     to --sb-color-yellow-500 and every tinted badge rendered GOLD stars in a
     browser — while SBR_Badge_Image's palette uses '#ffffff' for tinted, so the
     emailed PNG of the same badge showed white ones. Static, not derived: white
     does not come from the hue. */
  --sbr-tbb-star-fill: var(--sb-color-white);
}

@supports (color: oklch(0.5 0.1 250)) {
  .sbr-tb-badge[data-theme=tinted] {
    --sbr-tbb-surface: oklch(0.45 0.13 var(--sbr-tbb-h));
    --sbr-tbb-muted: oklch(0.88 0.04 var(--sbr-tbb-h));
    --sbr-tbb-line: oklch(0.55 0.12 var(--sbr-tbb-h));
    --sbr-tbb-foot: oklch(0.41 0.13 var(--sbr-tbb-h));
    --sbr-tbb-star-base: oklch(0.58 0.11 var(--sbr-tbb-h));
  }
}
/* Sidebar star accent passes a HUE (--sbr-tb-star-h); each theme derives its own
   star color from it. Light keeps a saturated derivation; dark goes lighter so
   stars pop; tinted ignores it (stars stay white via the rule above). */
/* An accent is a HUE, so there is no static equivalent — but leaving the
   declaration unguarded is worse than ignoring the accent: an unsupported
   oklch() makes the property invalid at computed-value time, which the
   downstream `var(--sbr-tb-star, …gold)` fallback does NOT rescue, so the stars
   lose their colour entirely. Old browsers get the default gold instead. */
@supports (color: oklch(0.5 0.1 250)) {
  .sbr-tb-badge.has-accent[data-theme=light] { --sbr-tb-star: oklch(0.6 0.25 var(--sbr-tb-star-h)); }
  .sbr-tb-badge.has-accent[data-theme=dark]  { --sbr-tb-star: oklch(0.78 0.19 var(--sbr-tb-star-h)); }
}

.sbr-tb-badge svg { display: block; }

/* The star row is NOT reimplemented here. templates/frontend/badges/stars.php
   renders it for every shape, floors to the nearest half exactly as
   FeedDisplay::overall_star_rating_display() does, and draws a half star by
   clipping a full one rather than scaling it — subtle enough that a second
   implementation would drift on the first change.
   Its rules live in sbr-badges.css at top level, so they already apply in here;
   what does NOT reach us is the four custom properties they read, which are
   declared on `.sbr-badge`. Bind them to this palette and the shared partial
   themes itself. */
.sbr-tb-badge .sbr-badge-stars {
  display: inline-flex; align-items: center; gap: var(--sb-space-0-5);
  line-height: var(--sb-line-height-none);
  /* accent (a hue, per theme) > theme fill (tinted = white) > gold */
  --sbr-badge-star: var(--sbr-tb-star, var(--sbr-tbb-star-fill, var(--sb-color-yellow-500)));
  --sbr-badge-star-dim: var(--sbr-tbb-star-base);
  --sbr-badge-star-gap: 0;
}
.sbr-tb-badge .sbr-badge-star { margin: 0; }
.sbr-tb-badge.sbr-tb-style-chip  .sbr-badge-stars { --sbr-badge-star-size: 14px; }
.sbr-tb-badge.sbr-tb-style-card  .sbr-badge-stars { --sbr-badge-star-size: 16px; }
.sbr-tb-badge.sbr-tb-style-medal .sbr-badge-stars { --sbr-badge-star-size: 15px; }
.sbr-tb-val { color: var(--sbr-tbb-ink); font-weight: var(--sb-font-weight-bold); font-variant-numeric: tabular-nums; line-height: var(--sb-line-height-none); }
.sbr-tb-cnt { color: var(--sbr-tbb-muted); line-height: var(--sb-line-height-tight) /* was 1.3 */; }
.sbr-tb-row { display: flex; align-items: center; gap: var(--sb-space-1-5); }

/* Marks in a row. The gap is set to 0 further down, in the chip block, where
   the avatar-stack overlap lives — each chip is an opaque disc with a ring that
   cuts the one behind it, which is what makes overlapping read as a stack
   rather than a collision. (This carried a note claiming the overlap had been
   dropped along with the chips; that was true of the v3 port and stopped being
   true when the chips came back.) */
/* Wraps because the five-mark cap is gone: a badge credits every platform whose
   reviews are in its rating, and eight marks on one line would push past the
   badge box. justify-content keeps a short second row centred under the first
   rather than hanging off the left. */
.sbr-tb-logos { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; row-gap: var(--sb-space-1); }
.sbr-tb-provider { display: inline-flex; align-items: center; justify-content: center; }

/* The mark's box is sized HERE, per style. The design sets it inline from JS
   (`style="width:16px;height:16px;flex:none"`), which a PHP template has no
   business reproducing — and without it the span shrink-wrapped whatever the
   SVG declared: Airbnb rendered 25x27, Trustpilot at its own ratio again, so a
   multi-platform row came out ragged and oversized. Square boxes, one size per
   style, exactly the numbers the design passes: chip 14, card and medal 16. */
.sbr-tb-provider { flex: none; width: 16px; height: 16px; }
.sbr-tb-style-chip .sbr-tb-provider { width: 14px; height: 14px; }

/* ---- The chip ----------------------------------------------------------
   Each mark sits in a tinted circle with a surface-coloured ring, and the row
   overlaps avatar-stack style. Ported from badge-gallery.html /
   badge-builder-v2.html.

   Worth recording why this was missing: badge-builder-v3.html REMOVES the chip
   and says so in its own comment ("with the chips gone the marks stand on this
   surface directly"), even recalibrating the dark theme's contrast for the
   bare marks. v3 was the file the rest of this stylesheet came from, so the
   marks arrived bare. Both treatments are the designer's; this is the one to
   ship.

   Padding is content-box on purpose — the circle measures the mark's size plus
   8px, which is what makes mixed logo shapes read as one consistent size. The
   ring is a hard box-shadow rather than a border so it does not add to the box
   and break that arithmetic. */
.sbr-tb-provider {
  box-sizing: content-box;
  padding: var(--sb-space-1);
  border-radius: var(--sb-radius-full);
  background: var(--sbr-prov-tint, var(--sb-color-gray-100));
  box-shadow: 0 0 0 1.5px var(--sbr-tbb-surface, var(--sb-color-white));
}

/* Gap 0 plus a negative sibling margin: the ring is what separates them, so a
   real gap would leave the stack looking merely spaced rather than stacked. */
.sbr-tb-logos { gap: 0; }
.sbr-tb-logos .sbr-tb-provider + .sbr-tb-provider { margin-left: -3px; }

/* Brand-adjacent tints. Derived from each platform's own colour, so they are
   not token-mappable — the design says as much. Providers without a tint fall
   back to the neutral above, which is the correct outcome for a mark we have
   no brand colour for rather than a guess at one. */
.sbr-tb-provider-google      { --sbr-prov-tint: #e8f0fe; }
.sbr-tb-provider-yelp        { --sbr-prov-tint: #fdeaea; }
.sbr-tb-provider-facebook    { --sbr-prov-tint: #e7f0fe; }
.sbr-tb-provider-trustpilot  { --sbr-prov-tint: #ddf3ea; }
.sbr-tb-provider-wordpressorg,
.sbr-tb-provider-wordpress\.org { --sbr-prov-tint: #e3eff5; }
.sbr-tb-provider-tripadvisor { --sbr-prov-tint: #def8ec; }
.sbr-tb-provider-woocommerce { --sbr-prov-tint: #f0e8ff; }

/* ---- Logo colour: auto | brand | mono ----------------------------------
   Keyed on `data-logos`, NOT on the theme. That is the whole point of the
   control, and the previous rule here — "every mark goes white on dark and
   tinted" — made Brand and Mono identical on two themes out of three.

   Measured in the prototype rather than assumed:

     light  auto -> brand,  mark #4285F4      light mono -> oklch(0.446 0.03 257)
     dark   auto -> mono,   mark #fff         dark  brand -> #4285F4 (brand, on dark)
     tinted all  -> mono,   mark #fff, and all three radios disabled

   So dark+Brand really does show brand colour; that is the combination the old
   rule was flattening.

   ONE THING THE DESIGN DOES NOT ANSWER: the chip. v2 and the gallery have the
   chips and no colour axis; v3 has the colour axis and no chips (its own words:
   "with the chips gone the marks stand on this surface directly"). We ship
   both, so what a brand-tinted circle does under a mono glyph is our call — and
   the tint goes with it, because a mono mark inside a brand-coloured circle is
   not mono. Flagged here so it reads as a decision, not an oversight. */

/* The ink a mono mark takes. Both values are the design's: white by default, a
   mid grey on light where white would disappear. */
.sbr-tb-badge { --sbr-tb-mono-ink: var(--sb-color-white); }
.sbr-tb-badge[data-theme=light] { --sbr-tb-mono-ink: var(--sb-color-gray-600); }

/* MONO — one ink, neutral chip. `:where()` keeps this at three classes so the
   per-brand exceptions below still outrank it. */
.sbr-tb-badge[data-logos=mono] .sbr-tb-provider {
  background: var(--sbr-tb-chip-neutral, var(--sb-color-gray-100));
}
.sbr-tb-badge[data-logos=mono] .sbr-tb-provider:where(:not(.sbr-tb-provider-ink)) :where(path, g, rect, circle):where(:not([fill^="url("])) {
  fill: var(--sbr-tb-mono-ink);
}

/* `.sbr-tb-provider-ink` marks a chip holding the DESIGN's single-ink artwork
   rather than a recoloured brand mark, and every recolour rule in this block
   has to skip it — including, especially, the blanket one above.
   Two of that artwork's marks are a <rect> painted through a <mask>, and a mask
   is a black-and-white image: white shows, black hides. Forcing its inner paths
   to the mono ink would flatten the mask to one value and the knock-out would
   vanish — reintroducing, through the fix, the exact blob it exists to prevent.
   Those SVGs paint with `fill="currentColor"`, and the chip already sets
   `color` to the mono ink further down, so they need no rule at all. */
.sbr-tb-badge[data-logos=mono] .sbr-tb-provider-ink svg { color: var(--sbr-tb-mono-ink); }
/* On dark and tinted the neutral chip is a lightened step of the badge's own
   surface, so the row belongs to the badge rather than sitting on top of it. */
/* A static step first, then the computed one where color-mix exists.
   Both are needed, and the fallback in `var(--sbr-tb-chip-neutral, …)` at the
   usage site does NOT cover this: an unsupported color-mix leaves the property
   invalid at computed-value time, which is a value — so the var() fallback is
   skipped and the chip loses its background entirely, leaving mono ink logos
   unbacked on dark and tinted. sb-tokens.css guards every one of its own
   color-mix declarations the same way. */
.sbr-tb-badge[data-theme=dark] { --sbr-tb-chip-neutral: #4a5261; }
.sbr-tb-badge[data-theme=tinted] { --sbr-tb-chip-neutral: #16659f; }

@supports (color: oklch(0.5 0.1 250)) {
  .sbr-tb-badge[data-theme=dark] { --sbr-tb-chip-neutral: oklch(0.43 0.018 266); }
  .sbr-tb-badge[data-theme=tinted] { --sbr-tb-chip-neutral: oklch(0.52 0.12 var(--sbr-tb-tint-h, 250)); }
}

@supports (color: color-mix(in oklab, red, white)) {
  .sbr-tb-badge:is([data-theme=dark], [data-theme=tinted]) { --sbr-tb-chip-neutral: color-mix(in oklab, var(--sbr-tbb-surface) 90%, white); }
}

/* BRAND — marks keep their own colours, so the chip has to stay light enough to
   read them. On dark and tinted that means white rather than the lightened
   surface: a brand blue on a near-black circle is the contrast problem v3
   solved by dropping the chips entirely. */
.sbr-tb-badge:is([data-theme=dark], [data-theme=tinted])[data-logos=brand] .sbr-tb-provider {
  background: var(--sb-color-white);
}

/* Parts that must not take the mono ink: shapes that were already white, and a
   brand's own backing disc or tile — filling those turns the mark into a blob.
   Read off our own SVGs, which are not the design's set. */
.sbr-tb-badge[data-logos=mono] .sbr-tb-provider:where(:not(.sbr-tb-provider-ink)) :where([fill="#FEFEFE"], [fill="white"], [fill="#fff"], [fill="#ffffff"]) {
  fill: transparent;
}
.sbr-tb-badge[data-logos=mono] :where(:not(.sbr-tb-provider-ink)).sbr-tb-provider-tripadvisor circle { fill: transparent; }
.sbr-tb-badge[data-logos=mono] :where(:not(.sbr-tb-provider-ink)).sbr-tb-provider-woocommerce rect,
.sbr-tb-badge[data-logos=mono] :where(:not(.sbr-tb-provider-ink)).sbr-tb-provider-zomato rect { fill: transparent; }
.sbr-tb-badge[data-logos=mono] :where(:not(.sbr-tb-provider-ink)).sbr-tb-provider-woocommerce path { fill: var(--sbr-tb-mono-ink); }
.sbr-tb-badge[data-logos=mono] :where(:not(.sbr-tb-provider-ink)).sbr-tb-provider-trustpilot path[fill="#005128"] { fill: transparent; }

/* Both dimensions plus the viewBox means preserveAspectRatio letterboxes the
   artwork inside the square instead of stretching it — which matters here
   because our marks are NOT uniformly square (Airbnb 25x27, Trustpilot
   799x761) while the design's happen to be. */
.sbr-tb-provider svg { width: 100%; height: 100%; }
/* No chip, in any theme or treatment: the mark sits on the badge surface. The
   circle's padding, radius, ring and background are all gone, along with the
   seven per-brand --prov-tint values that only existed to fill it. Sizing is
   now plain border-box, so the strip measures data-size rather than
   data-size + 8px and reads noticeably smaller than the chipped version at
   the same number. */
/* ---- Logo treatment, keyed off data-logos rather than the theme ---------
   These seven rules used to select on :is([data-theme=dark], [data-theme=tinted]),
   which is what made "colored" and "mono" side effects of the theme radio
   instead of things a user could pick. They now select on data-logos, which
   the renderer resolves from the Logos control — so either treatment is
   reachable from any theme, and `auto` reproduces the old mapping exactly.

   BRAND ships the bank's artwork untouched, straight onto the badge surface —
   there is no chip left to carry contrast, so each mark stands on its own
   against whatever the theme is. MONO is the bank's own mono artwork, tinted
   by one color declaration. Which column a mark comes from is decided in
   markFor(); all this block still does is set that color. */
.sbr-tb-badge { --sbr-tb-mono-ink: var(--sb-color-white); /* was #fff — same colour */ }
.sbr-tb-badge[data-theme=light] { --sbr-tb-mono-ink: var(--sb-color-gray-600); /* was oklch(0.44 0.028 264) — same colour */ }
/* The bank's mono marks are authored fill="currentColor", so mono is one color
   declaration and nothing else. Every per-brand fill escape that used to live
   here is gone with them — they only existed because mono was being faked by
   repainting the color artwork. Dark-variant swapping is in markFor(), not CSS,
   for the same reason: the bank ships it as artwork. */
.sbr-tb-badge[data-logos=mono] .sbr-tb-provider { color: var(--sbr-tb-mono-ink); }

/* The `.sbr-tb-fulllogo` generation that used to live here is gone. It was never
   emitted: logos.php has always written `sbr-tb-lockup sbr-tb-lockup-<slug>`
   (line 73), and `git log -S` finds no template or class that ever wrote the old
   name. Its knock-out escapes are ported onto the live class below — which is
   how the missing ones there were found. */


/* Footer strip — tinted, full badge width */
.sbr-tb-foot { background: var(--sbr-tbb-foot); color: var(--sbr-tbb-muted); font-size: 10px /* below the type scale floor (2xs = 12px) — no token */; letter-spacing: .01em /* no letter-spacing tokens */; text-align: center; padding: var(--sb-space-1-5) var(--sb-space-3); line-height: var(--sb-line-height-tight) /* was 1.3 */; }
.sbr-tb-foot b { font-weight: var(--sb-font-weight-semibold); }
/* a linked footer stays typographically identical to an unlinked one — the
   badge sits on someone else's page and a blue underline would read as chrome */
.sbr-tb-foot a { color: inherit; text-decoration: none; }
.sbr-tb-foot a:hover { text-decoration: underline; }

/* Empty preview placeholder — shown when no sources are selected */
.sbr-tb-badge-empty {
  display: inline-flex; align-items: center; gap: var(--sb-space-2);
  border: 1.5px /* between the 1px and 2px steps — kept so the dash reads lighter than a solid 2px */ dashed var(--sb-color-gray-300); border-radius: var(--sb-radius-lg);
  padding: var(--sb-space-3) var(--sb-space-5) /* was 12px 22px */; font-size: var(--sb-font-size-xs); color: var(--sb-color-gray-500);
}

/* Chip — compact: rating row over logo row, "By Smash Balloon" foot */
.sbr-tb-badge.sbr-tb-style-chip { border-radius: var(--sb-radius-xl) /* was 12px — same value */; box-shadow: var(--sb-shadow-sm); font-size: var(--sb-font-size-xs); }
.sbr-tb-badge.sbr-tb-style-chip .sbr-tb-main { display: grid; gap: var(--sb-space-2); justify-items: center; padding: var(--sb-space-2-5) var(--sb-space-4) var(--sb-space-2-5) /* was 11px 16px 10px — loses the 1px optical top */; }
.sbr-tb-badge.sbr-tb-style-chip .sbr-tb-val { font-size: var(--sb-font-size-sm) /* was 15px */; }
.sbr-tb-badge.sbr-tb-style-chip .sbr-tb-cnt { font-size: var(--sb-font-size-2xs) /* was 12.5px */; }

/* Card — wide horizontal: value | stars + count | logo row */
.sbr-tb-badge.sbr-tb-style-card { border-radius: var(--sb-radius-xl); box-shadow: var(--sb-shadow-base); }
.sbr-tb-badge.sbr-tb-style-card .sbr-tb-main { display: flex; align-items: center; gap: var(--sb-space-3-5); padding: var(--sb-space-3-5) var(--sb-space-4) /* was 14px 18px */; }
.sbr-tb-badge.sbr-tb-style-card .sbr-tb-val { font-size: var(--sb-font-size-2xl) /* was 27px */; letter-spacing: -0.02em /* no letter-spacing tokens */; }
.sbr-tb-card-col { display: grid; gap: var(--sb-space-1) /* was 5px */; justify-items: start; }
.sbr-tb-badge.sbr-tb-style-card .sbr-tb-cnt { font-size: var(--sb-font-size-2xs) /* was 12.5px */; }
.sbr-tb-card-src { display: flex; align-items: center; gap: var(--sb-space-2); padding-left: var(--sb-space-3-5); border-left: var(--sb-border-width-1) solid var(--sbr-tbb-line); }

/* Medal — vertical, centered: value / stars / count / logo row */
.sbr-tb-badge.sbr-tb-style-medal { border-radius: var(--sb-radius-xl); box-shadow: var(--sb-shadow-base); }
.sbr-tb-badge.sbr-tb-style-medal .sbr-tb-main { display: flex; flex-direction: column; align-items: center; gap: var(--sb-space-1-5) /* was 7px */; padding: var(--sb-space-5) var(--sb-space-7) var(--sb-space-3-5) /* was 19px 30px 15px */; }
.sbr-tb-badge.sbr-tb-style-medal .sbr-tb-val { font-size: var(--sb-font-size-3xl) /* was 30px — same value */; letter-spacing: -0.02em /* no letter-spacing tokens */; }
.sbr-tb-badge.sbr-tb-style-medal .sbr-tb-cnt { font-size: var(--sb-font-size-2xs); }
.sbr-tb-badge.sbr-tb-style-medal .sbr-tb-logos { margin-top: var(--sb-space-0-5); }
/* --- Block alignment ------------------------------------------------------
   The block declares core's left/center/right align support, which puts an
   `alignleft`/`aligncenter`/`alignright` class on the wrapper. Themes render
   the first and last of those as FLOATS, because that is what they mean on an
   image — text wraps around it. The design's own control does not float: its
   three states are `text-align` on the block's own row (`.bs-inner.al-*`), so
   the float is unset here rather than inherited.

   The badge itself is `display: inline-flex`, so text-align is what moves it. */
.wp-block-sbr-trust-badge { text-align: left; }
.wp-block-sbr-trust-badge.alignleft { float: none; margin: 0; text-align: left; }
.wp-block-sbr-trust-badge.aligncenter { text-align: center; }
.wp-block-sbr-trust-badge.alignright { float: none; margin: 0; text-align: right; }

/* ---- Full lockup (mark + wordmark) -------------------------------------
   Single-source only — the renderer resolves that lock before this markup
   exists, so there is never more than one lockup in a row.

   `.tb-fulllogo` from badge-builder-v3.html, NOT `.chip-w` from
   platform-logos.html — that 132x34 padded, rounded, filled chip is the swatch
   the specimen sheet presents each artwork ON. Measured on the running
   prototype in all three themes: transparent background, no padding, no
   radius, wrapper sized by its own artwork.

   The fill-flip below does carry over from the sheet, scoped to the badge's ink. */
.sbr-tb-logos-full { gap: 0; }
.sbr-tb-lockup {
  display: inline-flex; align-items: center; flex: none;
}
.sbr-tb-lockup svg { display: block; height: 18px; width: auto; }


/* Per-lockup heights from FULL_LOGO_H in badge-builder-v3.html. A mark beside a
   wordmark needs its own height or the tall ones read tiny.
   Mirrored in SBR_Badge_Image::lockup_height() so the PNG matches. EDD is in
   neither table and sits at the 18px base. */
.sbr-tb-lockup-google svg { height: 24px; }
.sbr-tb-lockup-yelp svg { height: 22px; }
.sbr-tb-lockup-trustpilot svg { height: 22.5px; }
.sbr-tb-lockup-facebook svg { height: 14.5px; }
.sbr-tb-lockup-wordpressorg svg { height: 23px; }
.sbr-tb-lockup-tripadvisor svg { height: 13px; }
.sbr-tb-lockup-woocommerce svg { height: 11.5px; }
.sbr-tb-lockup-airbnb svg { height: 22px; }
.sbr-tb-lockup-aliexpress svg { height: 13.5px; }
.sbr-tb-lockup-booking svg { height: 13.5px; }

/* Dark and tinted surfaces: the near-black wordmarks flip to white, brand
   accents keep their colours. Keyed on the FILL VALUE, exactly as the design's
   dark column is, so one lockup file serves every theme.

   The list is measured from the eleven shipped lockups, not copied: the
   prototype's own selector list carries #0e2c19, which matches none of the
   supplied artwork, and omits #002b11 / #873EFF / #191919 — the three
   providers it handled by shipping a second SVG instead. Same result, half
   the files.

   `:where()` keeps this at one class of specificity so the mono treatment
   below can still out-rank it. */
.sbr-tb-badge:is([data-theme=dark], [data-theme=tinted]) .sbr-tb-lockup :where(
  [fill="#000000"], [fill="#191919"], [fill="#464342"], [fill="#273b7d"],
  [fill="#0766FF"], [fill="#002b11"], [fill="#873EFF"]
) { fill: var(--sb-color-white); }

/* Yelp's wordmark is knocked out of a solid black plate, so flipping the
   black alone would leave white-on-white. The plate takes the surface. */
.sbr-tb-badge:is([data-theme=dark], [data-theme=tinted]) .sbr-tb-lockup-yelp :where([fill="#ffffff"]) {
  fill: var(--sbr-tbb-surface);
}

/* Mono flattens a lockup the same way it flattens the marks: one ink, no
   brand colour. Stated separately from the mark rule because a lockup has no
   [fill^="url("] rasters to exclude. */
.sbr-tb-badge[data-logos=mono] .sbr-tb-lockup :where(path, g, rect, circle, polygon) {
  fill: var(--sbr-tb-mono-ink);
}

/* The two authored knock-outs have to survive that flatten, or they stop being
   cutouts. Yelp's wordmark is #ffffff punched out of a solid black plate and
   Trustpilot's notch is #005128, so under mono both took the same ink as the
   shape they sit in — measured: every element of yelp-lockup.svg computed to
   oklch(0.446 0.03 256.802), wordmark and plate alike, so the wordmark was
   invisible. `fill=none` is a wrapper group, not a shape, and must stay unfilled.
   Same specificity as the rule above, so ORDER is what makes these win — they
   belong after it. */
.sbr-tb-badge[data-logos=mono] .sbr-tb-lockup :where([fill="#ffffff"], [fill="#005128"]) {
  fill: var(--sbr-tbb-surface);
}
.sbr-tb-badge[data-logos=mono] .sbr-tb-lockup :where([fill=none]) {
  fill: none;
}


/* ─── Placeholder ─────────────────────────────────────────────────────────
   Editor only. `data-placeholder` is set by SBR_Badge_Renderer::render() and no
   public caller asks for it, so this can never reach a page.

   Drawn at full size and with full stars on purpose: the author is laying out a
   badge, and a row of empty stars is a different height and a different shape
   from the one they will ship. The marks blur and the whole thing dims, which is
   what says "this is not your data yet" without shrinking anything. */
.sbr-tb-badge[data-placeholder="1"] {
  opacity: 0.75;
}

.sbr-tb-badge[data-placeholder="1"] :is(.sbr-tb-provider, .sbr-tb-lockup) {
  filter: blur(2.5px);
}

/* The number and its line stay legible — 0.0 over "Based on 0 reviews" is the
   part that has to be readable for the placeholder to be honest about itself. */
.sbr-tb-badge[data-placeholder="1"] :is(.sbr-tb-val, .sbr-tb-cnt) {
  filter: none;
}

/* The placeholder's logo row: a neutral chip, not a brand. Same size as a real
   mark so the row does not change height once a source is added. */
.sbr-tb-provider-placeholder {
  background: var(--sbr-tb-chip-neutral, var(--sb-color-gray-200));
}