/* =========================================================================
   Component — the two rating chips
   -------------------------------------------------------------------------
   A SIDES rating and a customer rating are both a number out of five with a
   star beside it, and they mean categorically different things. This file's
   job is to keep them apart on screen.

   HOW IT DOES THAT, AND WHAT IT DELIBERATELY DOES NOT RELY ON:

   - **The authority is always TEXT inside the chip.** `.storefront-rating-label`
     is never hidden, never a tooltip, never truncated. If it does not fit, the
     chip wraps. Colour never carries the meaning (DESIGN_TOKENS.md §4, audit
     rule E-4), and here that rule is not about a status pill somebody might
     misread — it is about a claim being attributed to the wrong party.

   - **The two chips do not merely differ, they differ in SHAPE.** The SIDES
     chip is filled and pill-shaped, the customer chip is outlined and square-
     cornered. Two chips separated only by hue are one chip to a monochrome
     display, a printed page, or roughly one in twelve men.

   The ink is the neutral `--sd-text` and not a semantic foreground, for the
   reason `badge.css` gives: in the light palette the semantic fg/bg pairs
   measure 3.5:1 – 4.2:1, which is AA for large text only, and this is 13 px
   (L-FE-03).
   ========================================================================= */

.storefront-ratings {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.storefront-rating {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sd-text);
  border: 1px solid var(--sd-border);
  /* The recess (DESIGN_TOKENS.md §9.1), not --sd-surface-alt, which is below
     the surface in light and above it in dark (L-FE-44). Both modifiers below
     override this, so it is the base only -- and a base that contradicts the
     depth model in one theme is the one a fourth chip would inherit. */
  background: var(--sd-sunk);
}

/* SIDES's own judgement: filled, pill, tinted with the informational token.
 *
 * IT KEEPS ITS FILL, and it is the only chip on a catalogue card that does —
 * §9.3 allows one tinted area per card, and SIDES's own verdict is what it is
 * spent on. The reason used to be "the same visual family as `.badge-info`,
 * because it sits beside the badges", and that stopped being true when the
 * badges gave up their fills: `.badge-info` is now a hairline. The fill stays
 * for the budget, not for the family.
 *
 * The BORDER moved to `--sd-info` for the reason `badge.css` measures. Left
 * on `--sd-info-bd`, this was the last tint-on-tint edge in the frontend —
 * 1.23:1 in light, 1.57:1 in dark, on the chip carrying the platform's own
 * judgement. `--sd-info` measures 3.78:1 and 5.74:1 against the same fill. */
.storefront-rating-sides {
  background: var(--sd-info-bg);
  border-color: var(--sd-info);
  border-radius: var(--radius-pill);
}

/* What customers said: outlined, square-cornered, on the neutral surface. Not
   a second tinted pill — the difference has to survive a greyscale print. */
.storefront-rating-customers {
  background: var(--sd-surface);
  border-color: var(--sd-border-strong);
  border-radius: var(--radius);
}

.storefront-star {
  /* NO COLOUR OF ITS OWN — it inherits the chip's ink, and that is a change
     from the obvious `--sd-warning`.

     Measured: gold on the SIDES chip's tinted ground is **3.72:1** in the light
     theme, where AA wants 4.5:1 for a 14 px glyph. There is a defence — the
     star is `aria-hidden`, the value and the authority are both text beside it,
     and WCAG exempts pure decoration — and the defence is not worth making. A
     star is recognisable by its SHAPE; making it gold buys nothing and costs an
     argument with every future contrast sweep. Inheriting `currentColor` makes
     it exactly as legible as the number it sits next to, whatever theme and
     whatever chip. */
  font-size: 14px;
}

.storefront-rating-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* The authority. Never hidden, never abbreviated, never below the size at
   which it is read — this is the one word that says which rating this is. */
.storefront-rating-label {
  font-weight: 600;
  color: var(--sd-text);
}

.storefront-rating-count {
  color: var(--doc-ink-soft);
  font-variant-numeric: tabular-nums;
}

/* WHICH reviews the figure is over, when it is over only some of them. It sits
   beside the count and reads like it, because it qualifies the same number.

   Like every other part of this chip it is never hidden and never truncated,
   and here that is load-bearing rather than inherited: `app.html` carries TWO
   customer chips — the listing's rating, over every approved review, and the
   aggregate above the review list, over the ones in the page's language. Both
   are correct numbers, and this clause is the only thing on screen that says
   they answer different questions. A chip that dropped it at a narrow width
   would put the two back into the same shape, which is the defect U-757
   repaired. (There is no `@media` block in this file, so nothing here hides at
   a width today; the note is a constraint on what may be added.) */
.storefront-rating-language {
  color: var(--doc-ink-soft);
}

/* The summary chip above a listing's reviews sits on its own line and reads a
   size larger — it is a heading for the section below it, not a chip among
   chips. */
.storefront-reviews-summary {
  margin-bottom: 20px;
}

.storefront-reviews-summary .storefront-rating {
  font-size: 15px;
  padding: 8px 16px;
}

/* A reviewer's own score, inside one review. Distinct from BOTH aggregate
   chips: no border, no fill, just the star and the value — so a reader
   scanning a list of reviews never mistakes one person's five for the
   average. */
.storefront-review-rating {
  font-weight: 600;
  font-size: 13px;
  color: var(--sd-text);
  font-variant-numeric: tabular-nums;
}

/* A badge carrying an icon does not also carry `badge.css`'s dot: the icon is
   the mark. Specificity beats the component rule (0,2,0 against 0,1,0), so no
   `!important` is needed and none is used. */
.badge.storefront-badge::before {
  display: none;
}

.storefront-badge {
  gap: 4px;
}

.storefront-badge svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.storefront-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}