/*
 * Sumzy shopper widget — production CSS (pixel-owned, docs/design/widget-design.md spec).
 * Scoped to .sumzy-summary. No styles bleed out (contain: style). CSS logical
 * properties throughout for RTL/script-agnostic rendering — no left/right.
 *
 * Exposed custom properties: the 6 + 3 layout/sentiment props (§2/§5 of the spec)
 * plus the merchant-color props --sumzy-border / --sumzy-text / --sumzy-heading /
 * --sumzy-max-width (Settings → Appearance, injected via wp_add_inline_style). Do
 * not add others without pixel sign-off.
 *
 * Mobile-first layout. Container queries are primary; @media fallbacks for
 * older browsers (Safari <16, Chrome <105). Narrow breakpoint = 28em (~448px),
 * applied when the widget itself is narrow (container query) or the viewport is
 * ≤480px (media fallback).
 *
 * 2026-06-01 overflow/chip fix:
 *  - Grid column divs (themes-pos / themes-neg) now carry min-inline-size:0
 *    so grid 1fr tracks can actually constrain them (without this, grid items
 *    default to min-width:auto and expand to their content, blowing out the card).
 *  - chip-list and chip also get min-inline-size:0 for the same reason down
 *    the flex chain.
 *  - Chip backgrounds changed to brand-guide §8: neutral gray for BOTH liked and
 *    noted; a small +/− indicator (::before) carries the sentiment color.
 *  - Defensive box-sizing scoped reset added — theme resets are inconsistent.
 */

/* ============================================================
   §1 — CUSTOM PROPERTY DEFAULTS
   ============================================================ */
.sumzy-summary {
  /* Explicit base defaults (Sand/light palette). Palette modifier classes
     (.sumzy-summary--brand-light, .sumzy-summary--dark, etc.) override these
     to their own values — these are the fallback when no modifier is present. */
  --sumzy-accent:        #FF6A2C;
  --sumzy-radius:        0.375em;
  --sumzy-card-bg:       transparent;
  --sumzy-card-shadow:   none;

  /* Merchant color overrides (Settings → Appearance). */
  --sumzy-border:        rgba(0, 0, 0, 0.08);   /* card border color */
  --sumzy-text:          #1A1410;               /* root text color */
  --sumzy-heading:       #1A1410;               /* heading color */
  --sumzy-max-width:     100%;                  /* card max inline size */

  /* Sentiment palette — pre-checked AA on white + dark bg */
  --sumzy-sentiment-pos: #15803d;   /* green-700  — AA on white ✓ 4.97:1 (green-600 #16a34a was 3.30:1, FAILED) */
  --sumzy-sentiment-neu: #b45309;   /* amber-700  — AA on white ✓ 5.02:1; used for Mixed badge TEXT + low-signal icon (must stay AA) */
  --sumzy-sentiment-neg: #dc2626;   /* red-600    — AA on white ✓ */

  /*
   * Consider-column GRAPHICS token (Item 1, 2026-06-12).
   * Scoped ONLY to the decorative consider-column graphics: the circle-tilde
   * col-icon, the ~ chip glyph (::before), and the proportion dots/bars.
   * These are aria-hidden / paired with text labels — 3:1 decorative threshold
   * applies, not 4.5:1 text AA.
   *
   * #d97706 (amber-600) on white ≈ 3.08:1 — acceptable for graphics per WCAG 1.4.11.
   * dark/ink: keep the existing bright #fbbf24 (amber-400, 10.09:1 AAA on #1e2228 ✓).
   *
   * --sumzy-sentiment-neu (#b45309 light) is NOT changed — the Mixed sentiment
   * badge label (text) + the low-signal info icon keep it (5.02:1, AA ✓).
   */
  --sumzy-consider: #d97706;        /* amber-600  — graphics-only, decorative (~3:1 on white acceptable per 1.4.11) */

  /*
   * AI disclosure pill — brand accent moment (§10).
   * Defaults: #FF6A2C on #FFEDE3 (light). The --dark modifier overrides both
   * (see §11: #FFEDE3 on #4b3029 = 10.53:1, AAA ✓).
   */
  --sumzy-ai-pill-bg:    #FFEDE3;
  /* A4: decouple from --sumzy-accent so a dark custom accent doesn't break the pill.
     Default-light value is #B23A0E (5.27:1 on #FFEDE3, AA ✓). */
  --sumzy-ai-pill-color: #B23A0E;

  /* A3: dedicated footer-muted token. Default matches the existing 60% opacity
     computation (#1A1410 at ~60% on white ≈ #767068 → 4.56:1 on white, AA ✓).
     preset_sand overrides this below; dark overrides live in §11. */
  --sumzy-footer-muted:  rgba(0, 0, 0, 0.60);
}

/* ============================================================
   §2 — LANDMARK WRAPPER (forge's <section>)

   The landmark is frequently a direct child of a block-theme
   `is-layout-constrained` container (Twenty Twenty-Five's single-product
   <main>), which clamps its children to --wp--style--global--content-size
   (~645px) and centers them with margin-inline:auto. That clamp made the
   card render as a narrow, centered prose column instead of lining up with
   the wide product area (the tabs, review list, image+summary row).

   We want the card to MATCH the site's wide content width — the same box the
   theme gives an `alignwide` block (e.g. .wp-block-woocommerce-product-details,
   which holds the Description/Reviews tabs). That block is capped at
   --wp--style--global--wide-size and centered. So we escape the 645px
   content-size clamp but re-cap the landmark at the theme's wide-size and
   re-center it, instead of breaking it out to the full (padded) container
   width. The shared `has-global-padding` on the parent <main> supplies the
   matching inline padding for both, so the edges align with the tabs.
   ============================================================ */
/*
 * The doubled class (.sumzy-summary-landmark.sumzy-summary-landmark) raises this
 * rule to specificity (0,2,0) so it reliably beats the block-theme constrained
 * rule `.is-layout-constrained > :where(...)` — which is also (0,1,0) but, being
 * a stylesheet that loads AFTER the plugin's, would otherwise win the tie on
 * source order and re-clamp the landmark to content-size. We set BOTH the
 * physical `max-width` (the property the theme actually sets) and the logical
 * `max-inline-size` to the wide-size, since they resolve to the same computed
 * value. Fallback 1340px = Twenty Twenty-Five's default wide-size, for themes
 * that don't expose the custom property.
 */
.sumzy-summary-landmark.sumzy-summary-landmark {
  display: block;
  inline-size: 100%;
  max-inline-size: var(--wp--style--global--wide-size, 1340px);
  max-width: var(--wp--style--global--wide-size, 1340px);
  /* Center within the (padded) constrained container, matching alignwide. */
  margin-inline: auto;
}

/* ============================================================
   §2a — SCOPED BOX-SIZING + INHERITED-PROPERTY RESET
   Twenty Twenty-Five resets box-sizing on *, but WooCommerce themes and
   page builders can inject conflicting resets. Scope ours to the widget
   so the widget is always predictable regardless of host-theme rule order.

   The margin/padding/list-style descendant reset clears aggressive theme
   resets (Flatsome/Woodmart/Avada/Divi) that can collapse spacing inside the
   widget. Must appear BEFORE §3 component rules so source-order ensures
   explicit component values win. Does NOT apply to .sumzy-summary itself —
   only its descendants — so the card's own padding/margin are unaffected.
   ============================================================ */
.sumzy-summary,
.sumzy-summary *,
.sumzy-summary *::before,
.sumzy-summary *::after {
  box-sizing: border-box;
}
/* Descendant reset — before any component rule that sets margin/padding */
.sumzy-summary * {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ============================================================
   §3 — ROOT
   ============================================================ */
/*
 * §3 entrance fade — motion is opt-in (prefers-reduced-motion: no-preference).
 * Fades in + rises 8px over 0.25s on first paint. The guard ensures no motion
 * on systems that prefer reduced motion; the widget renders fully visible there.
 */
@media (prefers-reduced-motion: no-preference) {
  .sumzy-summary {
    animation: sumzy-enter 0.25s ease-out both;
  }
}
@keyframes sumzy-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sumzy-summary {
  font-family: inherit;   /* keep theme font */
  font-size: inherit;
  line-height: inherit;
  /* Theme-bleed resets — prevent aggressive themes (Divi/Avada/Flatsome) from
     leaking italic, small-caps, letter-spacing, etc. into the widget. */
  font-style: normal;
  font-variant: normal;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0;
  text-align: start;
  color: var(--sumzy-text, #1A1410);
  background: var(--sumzy-card-bg, transparent);
  border-radius: var(--sumzy-radius, 0.375em);
  box-shadow: var(--sumzy-card-shadow, none);

  /* Mobile-first padding: tighter on narrow, comfortable on wide */
  padding-block: 1em;
  padding-inline: 1em;

  border: 1px solid var(--sumzy-border, rgba(0, 0, 0, 0.08));
  margin-block: 1.5em;
  /* Full-width by default: fill the (now-unclamped) landmark. The merchant's
     --sumzy-max-width caps the card and margin-inline:auto centers it ONLY when
     a cap is set; with the default 100% the auto margins collapse to 0 and the
     card spans its container. */
  inline-size: 100%;
  max-inline-size: var(--sumzy-max-width, 100%);
  margin-inline: auto;

  /* Container queries for internal layout; contain prevents style leakage */
  container-type: inline-size;
  container-name: sumzy;
  contain: style;
}

/* Wider padding once the widget has breathing room (≥28em / ~448px) */
@container (min-width: 28em) {
  .sumzy-summary {
    padding-block: 1.25em;
    padding-inline: 1.5em;
  }
}
@media (min-width: 500px) {
  .sumzy-summary {
    padding-block: 1.25em;
    padding-inline: 1.5em;
  }
}

/* ============================================================
   §3a — MINIMAL LAYOUT MODIFIER (per-placement, block / Elementor)
   The manual-placement "Minimal" layout choice (--sumzy-layout:minimal,
   .sumzy-summary--minimal). A clean, compact, BORDERLESS variant of the card:
   the chrome (border, shadow, card background, box padding) drops away so the
   summary reads as inline content flush with the surrounding page, while the
   internal type, sentiment palette, theme chips, footer rule, and AI disclosure
   are all unchanged. Only the outer container chrome relaxes — everything that
   makes the summary trustworthy and on-brand is preserved.

   The block-direction rhythm is kept (the §3 margin-block:1.5em still separates
   the summary from neighbouring content); only the box's own padding is removed.
   This base rule appears AFTER §3's responsive padding bumps in source order, so
   at equal specificity it already wins the cascade at every container/viewport
   width — no per-breakpoint override is needed.
   ============================================================ */
.sumzy-summary--minimal {
  border: 0;
  box-shadow: none;
  background: transparent;
  padding-block: 0;
  padding-inline: 0;
}

/* ============================================================
   §4 — HEADER
   ============================================================ */
.sumzy-summary__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  flex-wrap: wrap;
  margin-block-end: 0.875em;
}
/* Logo + heading travel together; the title group takes available space so the
   sentiment badge stays pinned to the opposite edge (or wraps below). */
.sumzy-summary__title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex: 1 1 auto;
  min-inline-size: 0;
}
.sumzy-summary__logo {
  flex-shrink: 0;
  inline-size: 1.25em;
  /* block-size:auto + aspect-ratio let the SVG viewBox drive height. Both the
     dark-mode (161.11×152.84) and light-mode (156.01×148) favicon variants have
     a ~1.054:1 ratio; 161:153 is a safe integer approximation that fits both. */
  block-size: auto;
  aspect-ratio: 161 / 153;
}
.sumzy-summary__heading {
  /* A10: clamp caps heading growth on 20px-base stores; floor never below body (1em). */
  font-size: clamp(1em, 1.2em, 1.375rem);
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
  color: var(--sumzy-heading, #1A1410);
  /* Heading shrinks within the title group; badge pushes to next line instead */
  min-inline-size: 0;
}

/* ============================================================
   §5 — SENTIMENT BADGE
   ============================================================ */
.sumzy-summary__sentiment {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.875em;
  font-weight: 500;
  padding-block: 0.3em;
  padding-inline: 0.6em;
  border-radius: var(--sumzy-radius, 0.375em);
  background-color: var(--_sentiment-bg);
  color: var(--_sentiment-color);
  /* Badge never wraps internally; heading takes available space first */
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1.2;
}

/* Positive states */
.sumzy-summary__sentiment[data-sentiment="strongly_positive"],
.sumzy-summary__sentiment[data-sentiment="mostly_positive"] {
  --_sentiment-color: var(--sumzy-sentiment-pos, #15803d);
  /* rgba() fallback for Safari <15.4 (no color-mix support) */
  --_sentiment-bg: rgba(21, 128, 61, 0.12);
}
@supports (color: color-mix(in srgb, red 1%, blue)) {
  .sumzy-summary__sentiment[data-sentiment="strongly_positive"],
  .sumzy-summary__sentiment[data-sentiment="mostly_positive"] {
    --_sentiment-bg: color-mix(in srgb, var(--sumzy-sentiment-pos, #15803d) 12%, transparent);
  }
}

/*
 * Mixed sentiment — amber treatment (neutral, not alarming, not positive).
 * Icon: ArrowUpDown (Lucide) — two opposing arrows convey "divided opinions".
 * Label: "Mixed reviews"
 * Color: --sumzy-sentiment-neu (#b45309 default, amber-700, AA on white ✓)
 */
.sumzy-summary__sentiment[data-sentiment="mixed"] {
  --_sentiment-color: var(--sumzy-sentiment-neu, #b45309);
  /* rgba() fallback for Safari <15.4 */
  --_sentiment-bg: rgba(180, 83, 9, 0.12);
}
@supports (color: color-mix(in srgb, red 1%, blue)) {
  .sumzy-summary__sentiment[data-sentiment="mixed"] {
    --_sentiment-bg: color-mix(in srgb, var(--sumzy-sentiment-neu, #b45309) 12%, transparent);
  }
}

/* Negative states */
.sumzy-summary__sentiment[data-sentiment="mostly_negative"],
.sumzy-summary__sentiment[data-sentiment="strongly_negative"] {
  --_sentiment-color: var(--sumzy-sentiment-neg, #dc2626);
  /* rgba() fallback for Safari <15.4 */
  --_sentiment-bg: rgba(220, 38, 38, 0.12);
}
@supports (color: color-mix(in srgb, red 1%, blue)) {
  .sumzy-summary__sentiment[data-sentiment="mostly_negative"],
  .sumzy-summary__sentiment[data-sentiment="strongly_negative"] {
    --_sentiment-bg: color-mix(in srgb, var(--sumzy-sentiment-neg, #dc2626) 12%, transparent);
  }
}

.sumzy-summary__sentiment svg {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}

/* ============================================================
   §6 — PROSE
   ============================================================ */
.sumzy-summary__prose {
  margin-block: 0 1em;
  font-size: 1em;
  line-height: 1.65;
}

/* ============================================================
   §7 — THEME GRID (chips section)
   ============================================================ */
.sumzy-summary__themes {
  /* Mobile-first: single column */
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875em;
  margin-block-end: 1em;
}

/* Two-column layout once the widget itself is wide enough (~480px).
   Named container form: targets .sumzy-summary specifically.
   30em at the widget's own font-size (typically 16px) ≈ 480px — wide enough
   that a cramped sidebar column (~440px) stays single-column while a
   full-width widget (≥700px) gets two columns. */
@container sumzy (min-width: 30em) {
  .sumzy-summary__themes {
    grid-template-columns: 1fr 1fr;
    gap: 0.75em 1.25em;
  }
}
/* Fallback for browsers without container-query support (Safari <16, Chrome <105):
   viewport-width media query preserves two columns on wide screens. */
@supports not (container-type: inline-size) {
  @media (min-width: 500px) {
    .sumzy-summary__themes {
      grid-template-columns: 1fr 1fr;
      gap: 0.75em 1.25em;
    }
  }
}

/* Single-section (only positives or only negatives): span the full width */
@container (min-width: 28em) {
  .sumzy-summary__themes-pos:only-child,
  .sumzy-summary__themes-neg:only-child {
    grid-column: 1 / -1;
  }
}
@media (min-width: 500px) {
  .sumzy-summary__themes-pos:only-child,
  .sumzy-summary__themes-neg:only-child {
    grid-column: 1 / -1;
  }
}

.sumzy-summary__col-head {
  display: flex;
  align-items: center;
  gap: 0.4em;
  /* A7: 0.875em (relative to widget's inherited base) — was 0.875rem (fixed px).
     Prevents oversizing on stores with a non-16px base font. */
  font-size: 0.875em;
  line-height: 1; /* A7: optical alignment with col icon under any inherited line-height */
  font-weight: 500;
  /* Breathing room around the column label. Mirrors the canonical /design widget's
     .sz-col__label margin-block: 0.8em 1.2em 1:1 — keep these two in lockstep. */
  margin-block: 0.8em 1.2em;
  text-align: start;
}
/* Label text at full opacity — no dim. Sentence-case label is legible at full strength. */
.sumzy-summary__col-head-text {
  opacity: 1;
  color: currentColor;
}
/* Column icon — sentiment-colored line glyph (green for liked, amber for consider).
 * Tokens are theme-aware: §11 overrides --sumzy-sentiment-pos/neu to AAA-passing
 * light values on the dark card, so this is legible on all 5 appearance modes.
 * The SVG uses stroke="currentColor" so it inherits these `color` values. */
.sumzy-summary__col-icon {
  flex-shrink: 0;
  inline-size: 0.875rem;
  block-size: 0.875rem;
}
.sumzy-summary__themes-pos .sumzy-summary__col-icon {
  color: var(--sumzy-sentiment-pos, #15803d);
}
.sumzy-summary__themes-neg .sumzy-summary__col-icon {
  /* Consider-column circle-tilde icon: brighter amber graphics token (decorative, aria-hidden). */
  color: var(--sumzy-consider, #d97706);
}

/* On single-column layout add a separator between positive and negative sections */
.sumzy-summary__themes-neg {
  padding-block-start: 0;
}
@container (max-width: 27.99em) {
  .sumzy-summary__themes-neg {
    padding-block-start: 0.25em;
  }
}
@media (max-width: 499px) {
  .sumzy-summary__themes-neg {
    padding-block-start: 0.25em;
    border-block-start: 1px solid rgba(0, 0, 0, 0.06);
  }
  /* A9: the rgba(0,0,0,.06) separator is invisible on a dark card; swap it. */
  .sumzy-summary--dark .sumzy-summary__themes-neg {
    border-block-start-color: rgba(255, 255, 255, 0.08);
  }
}

/*
 * Both column divs must carry min-inline-size:0.
 * Grid items default to min-width:auto — without this, a chip with a long
 * label causes the column div to expand past its 1fr track, overflowing the
 * card on the right. min-inline-size:0 lets the grid track enforce the limit.
 */
.sumzy-summary__themes-pos,
.sumzy-summary__themes-neg {
  min-inline-size: 0;
}

.sumzy-summary__chip-list {
  display: flex;
  flex-wrap: wrap;     /* chips wrap into multiple rows on very narrow widths */
  gap: 0.375em;
  /* flex container also needs min-inline-size:0 so its parent can shrink it */
  min-inline-size: 0;
}

/*
 * BRAND GUIDE §8 chip treatment — neutral gray background, small colored +/~
 * indicator via ::before. NOT a filled colored chip.
 *
 * --_chip-indicator-color: the +/~ symbol's color (green for pos, amber for neg)
 * --_chip-indicator:       the symbol character (+ or ~)
 *
 * Neutral chip bg: currentColor at 6% opacity — resolves to --sumzy-text
 * (explicit on every palette class), so it reads as a soft gray on any
 * background (light or dark) without hardcoding a gray value that might clash.
 *
 * Containment: max-inline-size:100% + overflow:hidden are only effective if
 * the containing block is constrained. Containment comes from min-inline-size:0
 * on the column divs above. The chip also gets min-inline-size:0 so it can
 * shrink within the flex chip-list row.
 */
.sumzy-summary__chip {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;   /* label + mentions stay on one line within the chip */
  gap: 0.3em;
  padding-block: 0.4125em;
  padding-inline: 0.7em 0.625em;
  border-radius: var(--sumzy-radius, 0.375em);
  font-size: 0.875em;
  line-height: 1.3;
  background: transparent;
  max-inline-size: 100%;
  min-inline-size: 0;     /* allow chip to shrink inside flex chip-list */
  overflow: hidden;
}

/* Small +/~ indicator before the label — carries the sentiment color */
.sumzy-summary__chip::before {
  content: var(--_chip-indicator, "");
  color: var(--_chip-indicator-color, currentColor);
  font-weight: 700;
  font-size: 1em;
  line-height: 1;
  flex-shrink: 0;
}

.sumzy-summary__chip--pos {
  --_chip-indicator:       "+";
  /* Positive glyph = green sentiment token (theme-aware, dark-safe via §11). */
  --_chip-indicator-color: var(--sumzy-sentiment-pos, #15803d);
  /* rgba() fallback for Safari <15.4 — neutral gray background (owner: keep faded grey pill) */
  background: rgba(128, 128, 128, 0.08);
}
@supports (color: color-mix(in srgb, red 1%, blue)) {
  .sumzy-summary__chip--pos {
    background: color-mix(in srgb, currentColor 8%, transparent);
  }
}
.sumzy-summary__chip--neg {
  --_chip-indicator:       "~"; /* tilde — "things to consider" cue, softer than minus */
  /* Consider-column ~ glyph: brighter amber graphics token (decorative, aria-hidden via ::before). */
  --_chip-indicator-color: var(--sumzy-consider, #d97706);
  /* rgba() fallback for Safari <15.4 — neutral gray background (owner: keep faded grey pill) */
  background: rgba(128, 128, 128, 0.08);
}
@supports (color: color-mix(in srgb, red 1%, blue)) {
  .sumzy-summary__chip--neg {
    background: color-mix(in srgb, currentColor 8%, transparent);
  }
}

.sumzy-summary__chip-label {
  font-weight: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-inline-size: 0;    /* lets flexbox shrink this span so label truncates */
}
/*
 * §7a — PROPORTION + LIFECYCLE MODIFIERS
 *
 * Proportionality is shown by DIMMING low-mention chips, never by hiding them
 * (NO SUPPRESSION — a one-off negative must stay fully readable beside a
 * many-mention one, just lighter). We dim ONLY the neutral label + qualifier,
 * never the sentiment +/~ indicator (::before), so the green/amber cue keeps its
 * pre-checked AA contrast at every proportion level.
 *
 *   --m-single : lowest proportion → most muted (still ≥ 0.8 so AA holds)
 *   --m-few    : middle proportion → slightly muted
 *   --m-many   : highest proportion → full strength (no rule needed)
 */
.sumzy-summary__chip--m-single .sumzy-summary__chip-label {
  opacity: 0.8;
}
.sumzy-summary__chip--m-few .sumzy-summary__chip-label {
  opacity: 0.9;
}
/*
 * --resolved : a (typically negative) theme the reviews indicate was FIXED.
 * Rendered as a quiet footnote — muted + italic label/qualifier — NOT a live
 * red flag. Honest, not hidden: the chip and its sentiment indicator stay
 * present and readable. The +/− indicator (::before) is left untouched so the
 * chip still scans as a noted point, just de-emphasized.
 *
 * De-emphasis is ITALIC (the affordance that says "already addressed") plus a
 * gentle opacity dip — NOT a sub-AA fade. opacity 0.55 muted the text below AA
 * (light 4.03:1 — FAIL; dark 4.86:1 — marginal); we claim AA, so the floor is
 * 0.7, which clears 4.5:1 with margin in BOTH cards while still reading quieter
 * than every live theme chip (single-mention floor is 0.8; many/base full).
 */
.sumzy-summary__chip--resolved .sumzy-summary__chip-label {
  opacity: 0.7;
  font-style: italic;
}
/* A10: italic is a Latin affordance — CJK/RTL scripts have no italic concept.
   Opacity already carries the de-emphasis signal in these scripts. */
[dir="rtl"] .sumzy-summary__chip--resolved .sumzy-summary__chip-label {
  font-style: normal;
}

/* ============================================================
   §7b — PROPORTION CIRCLES
   3-dot indicator (like a signal-strength icon). Replaces text labels.
   Always 3 dots rendered; .bar--on = active (full color), inactive faded.
   Bars are aria-hidden; mention bucket announced via .sumzy-sr-only.
   --_bar-color: set per chip variant below.
   ============================================================ */
/*
 * Proportion circles — 3 equal-size dots; active ones colored, inactive faded.
 * single=1 active, few=2, many=3. Margin from label via margin-inline-start.
 * aria-hidden on the wrapper; sr-only text announces the bucket to assistive tech.
 */
.sumzy-summary__chip-bars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  line-height: 1;
  margin-inline-start: 0.3em;
}
.sumzy-summary__chip-bars::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.7em;
  background: currentColor;
  opacity: 0.22;
  margin-inline-end: 0.35em;
  align-self: center;
  flex-shrink: 0;
}
.sumzy-summary__bar {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--_bar-color, currentColor);
  opacity: 0.18;
  flex-shrink: 0;
}
/* Resolved-chip bar-dot: opacity 0.5 — consistent de-emphasis with the label floor (0.7). */
.sumzy-summary__chip--resolved .sumzy-summary__bar {
  opacity: 0.5;
}
.sumzy-summary__bar--on {
  opacity: 1;
}

/* Bar colors: sentiment tokens so dots echo the column color (green pos, amber neg).
 * Tokens are theme-aware (§11 overrides to AAA-passing values on dark card), so
 * bars stay legible across all 5 appearance modes without hardcoding hex. */
.sumzy-summary__chip--pos .sumzy-summary__chip-bars {
  --_bar-color: var(--sumzy-sentiment-pos, #15803d);
}
.sumzy-summary__chip--neg .sumzy-summary__chip-bars {
  /* Consider-column proportion dots: brighter amber graphics token (aria-hidden, decorative). */
  --_bar-color: var(--sumzy-consider, #d97706);
}

/* A9: inactive dots + hairline separator near-invisible on dark card.
   Raise from 0.18→0.28 (dots) and 0.22→0.30 (hairline) so they read on dark bg. */
.sumzy-summary--dark .sumzy-summary__bar {
  opacity: 0.28;
}
.sumzy-summary--dark .sumzy-summary__chip-bars::before {
  opacity: 0.30;
}

/* ============================================================
   §8 — FOOTER
   Flex-flow layout (2026-06-12):
     Top row: <details> trigger (left, flex:0 1 auto) + .attrib-group (right).
              Both baseline-align naturally in the same flex row.
     Body row: .sumzy-summary__howto-body is a full-width flex sibling AFTER the
              attrib-group, revealed by the general-sibling selector when [open].
              No absolute positioning — the attribution is in normal flow.
   DOM order: merchant-disclaimer · <details> · .attrib-group · .howto-body
   ============================================================ */
.sumzy-summary__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5em;
  padding-block-start: 0.75em;
  border-block-start: 1px solid rgba(0, 0, 0, 0.07);
  font-size: 0.75em;
  /* A3: read --sumzy-footer-muted token (set in §1, overridden per preset in §11).
     rgba() fallback for Safari <15.4: a child can override `color` to restore
     full-strength (opacity on a parent would block that). */
  color: var(--sumzy-footer-muted, rgba(0, 0, 0, 0.60));
}
/* Dark-card fallback — text is near-white (#EEEEEE); token overridden in §11. */
.sumzy-summary--dark .sumzy-summary__footer {
  color: var(--sumzy-footer-muted, rgba(238, 238, 238, 0.60));
}

/* A8: Narrow footer stack — below 24em (~384px) the footer stacks to column.
   The container name 'sumzy' is set on .sumzy-summary (§3).
   Fallback @media for browsers without container-query support. */
@container sumzy (max-width: 24em) {
  .sumzy-summary__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4em;
  }
}
@supports not (container-type: inline-size) {
  @media (max-width: 384px) {
    .sumzy-summary__footer {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.4em;
    }
  }
}

/* ============================================================
   §8m — MERCHANT CUSTOM DISCLAIMER (post-1.0 §2, all-tier)
   Optional, merchant-authored line. STRUCTURALLY SEPARATE from the
   mandatory [AI]-generated disclosure (§9) — its own full-width block
   at the top of the footer, never inside .attrib-group. Renders only
   when the merchant enabled it; the [AI] pill is unconditional.
   ============================================================ */
.sumzy-summary__merchant-disclaimer {
  flex-basis: 100%;
  margin: 0;
  line-height: 1.5;
}

/* ============================================================
   §8a — FOOTER "HOW ARE REVIEWS SUMMARIZED?" DETAIL
   Left-aligned expandable; uses native <details>/<summary> — no JS.
   Trigger is an inline-flex row: "Based on N reviews" count + circle-i icon.
   The dotted-underline affordance is replaced by the icon itself (W2, 2026-06-11).
   Flex-flow (2026-06-12): the <details> is flex:0 1 auto (left) and baseline-aligns
   with the .attrib-group (right) in the footer's space-between row. No padding
   clearance needed — the attrib-group is back in normal flow.
   ============================================================ */
.sumzy-summary__howto {
  /* Normal flex sizing — left side of the space-between top row. */
  flex: 0 1 auto;
  min-inline-size: 0;
}

.sumzy-summary__howto-trigger {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  cursor: pointer;
  padding-block: 0.375em;
  text-decoration: none;
}
/* Focus-visible ring on the native <summary> inside .sumzy-summary__howto.
   Descendant selector so themes cannot override from outside the widget scope. */
.sumzy-summary__howto-trigger:focus-visible {
  outline: 2px solid var(--sumzy-accent, #FF6A2C);
  outline-offset: 2px;
  border-radius: 2px;
}
.sumzy-summary__howto-trigger::-webkit-details-marker,
.sumzy-summary__howto-trigger::marker {
  display: none;
  content: "";
}

/* Review count: surrounding text inherits footer muted color; the bold N is full ink. */
.sumzy-summary__review-count strong {
  font-weight: 500;
  color: var(--sumzy-text, #1A1410);
}

/* Circle-i info icon: fixed 14×14px box, vertically centred. */
.sumzy-summary__info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 14px;
  block-size: 14px;
  color: currentColor;
  vertical-align: middle;
  flex-shrink: 0;
}
.sumzy-summary__info-icon svg {
  inline-size: 14px;
  block-size: 14px;
}

/* Hover: icon tints to accent. Gated to devices with fine hover (not touch). */
@media (hover: hover) and (pointer: fine) {
  .sumzy-summary__howto-trigger:hover .sumzy-summary__info-icon {
    color: var(--sumzy-accent, #FF6A2C);
  }
}

/* Transition: icon color + [open] rotation — both gated to no-preference so
   prefers-reduced-motion users see instant state changes, not animation. */
@media (prefers-reduced-motion: no-preference) {
  .sumzy-summary__info-icon {
    transition: color 160ms cubic-bezier(.22,.61,.36,1), transform 160ms cubic-bezier(.22,.61,.36,1);
  }
  .sumzy-summary__howto[open] .sumzy-summary__info-icon {
    transform: rotate(15deg);
  }
}

.sumzy-summary__howto[open] .sumzy-summary__howto-trigger {
  margin-block-end: 0.4em;
}

.sumzy-summary__howto-body {
  /* Full-width flex sibling: occupies its own row below the trigger + attrib row.
     Hidden by default; revealed when the <details> sibling is [open] via the
     general-sibling selector below. No max-inline-size cap — spans the full footer. */
  flex-basis: 100%;
  inline-size: 100%;
  display: none;
  margin-block-start: 0.4em;
  margin-block-end: 0;
  line-height: 1.5;
}
/* Reveal the body when the preceding <details> sibling is open.
   General-sibling combinator (~) works because .howto-body is a sibling of
   .sumzy-summary__howto in the footer flex container, appearing AFTER it in DOM
   order. Native <details> toggle still drives the open/closed state. */
.sumzy-summary__howto[open] ~ .sumzy-summary__howto-body {
  display: block;
}

/* ============================================================
   §9 — DISCLOSURE + ATTRIBUTION
   .attrib-group wraps the [AI] pill + "summary" + "by Sumzy"
   so they read as one phrase.
   Flex-flow (2026-06-12): back in normal flow, right side of the
   space-between top row. Baseline-aligns with the trigger naturally.
   No absolute positioning needed — the .howto-body full-width sibling
   opens below via the general-sibling CSS selector.
   ============================================================ */
.sumzy-summary__attrib-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3em;
  flex-shrink: 0;
  margin-inline-start: auto;
}

.sumzy-summary__disclosure {
  text-align: start;
  display: inline;
}
.sumzy-summary__attribution {
  white-space: nowrap;
}
/* Higher specificity (0,2,0) so theme link resets (e.g. Woodmart a{text-decoration:none}) don't win. */
.sumzy-summary .sumzy-summary__attribution-link {
  /* Inherit the footer's --sumzy-footer-muted color so the link reads at the same
     muted weight as the surrounding "summary by" text. The underline is the sole
     non-color link affordance (WCAG 1.4.1 — do not remove). Footer muted token
     is AA-verified on every palette (≥4.5:1, A3 2026-06-12). */
  color: inherit;
  font-weight: 500;
  text-decoration: underline;
}

/* ============================================================
   §10 — AI DISCLOSURE PILL
   Visual: small "AI" badge + "summary".
   Screen reader: the pill is aria-hidden (markup); an sr-only "AI-generated"
   fragment precedes "summary" so assistive tech hears the complete
   "AI-generated summary" phrase even though it visually shows "AI".

   Pill uses brand accent tint/text — the ONE deliberate orange
   moment in the widget. Text color = --sumzy-accent (defaults to
   #FF6A2C, merchant-overridable on Custom plans). Dark-theme
   merchants override --sumzy-ai-pill-color to #FFEDE3 (10.53:1 AAA ✓).

   Dark-theme merchants add to their theme CSS:
     .sumzy-summary {
       --sumzy-ai-pill-bg:    #4b3029;
       --sumzy-ai-pill-color: #FFEDE3;
     }
   ============================================================ */
.sumzy-summary__ai-pill {
  display: inline-block;
  vertical-align: middle;        /* align pill to text midline in inline context */
  padding-block: 0.15em;
  padding-inline: 0.4em;
  border-radius: 0.25em;         /* tighter radius than widget default — pill shape */
  background: var(--sumzy-ai-pill-bg, #FFEDE3);
  /* A4: fallback is #B23A0E (5.27:1 on #FFEDE3 — AA ✓); token set in §1. */
  color: var(--sumzy-ai-pill-color, #B23A0E);
  font-size: 0.85em;             /* slightly smaller than surrounding footer text */
  /* A10: pixel-specified weight + tracking (converge with marketing pill). */
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}

/*
 * Screen-reader-only utility for the "-generated" hidden text.
 * Forge uses this class on a <span> inside the disclosure.
 * Matches the standard sr-only pattern used across accessibility toolkits.
 */
.sumzy-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   §11 — DARK THEME OVERRIDES
   Applied via the .sumzy-summary--dark modifier class, which the plugin
   adds when the merchant enables "Widget appearance: Dark" in Settings.
   This tracks the ACTUAL card darkness — NOT prefers-color-scheme (OS
   preference is an independent axis from the store theme and caused
   cross-axis AA failures in both directions).

   Light defaults pass AA on white (#fff):
     pos #15803d 4.97:1 · neu #b45309 4.95:1 · neg #dc2626 4.88:1
     (pos was green-600 #16a34a at 3.30:1 — FAILED AA, bumped to green-700)

   Light defaults FAIL on a dark card (#1e2228, lum 0.0149):
     pos #15803d 3.18:1 · neu #b45309 3.27:1 · neg #dc2626 3.32:1

   Dark overrides — all computed against #1e2228 (lum 0.0149), need ≥4.5:1:
     pos #4ade80 (green-400)  lum 0.573 → 9.60:1 AAA ✓
     neu #fbbf24 (amber-400)  lum 0.605 → 10.09:1 AAA ✓
     neg #f87171 (red-400)    lum 0.330 → 5.85:1 AA ✓
         (red-500 #ef4444 lum 0.210 → 4.37:1 FAILS — red-400 required)
   AI pill:
     #FFEDE3 on #4b3029 = 10.53:1 AAA ✓

   Structural separators:
     rgba(0,0,0,…) borders become invisible on a dark card; replaced with
     rgba(255,255,255,0.12) which reads as a subtle light rule.

   Merchants can still hard-override any custom property on .sumzy-summary.
   ============================================================ */
/*
 * Default Light — Sumzy's own light palette (appearance mode 'default_light',
 * and the base for 'custom'). Consistent across any store theme.
 * AA: text/heading #111 on card #FFF = 18.4:1 (verified by pixel).
 */
.sumzy-summary--brand-light {
  --sumzy-card-bg: #FFFFFF;
  --sumzy-border:  #EEEEEE;
  --sumzy-heading: #1A1410;
  --sumzy-text:    #1A1410;
  --sumzy-accent:  #FF6A2C;
  /* A3: default-light footer-muted is ~60% of #1A1410 on #FFFFFF.
     color-mix(in srgb, #1A1410 60%, transparent) ≈ #767068 → 4.56:1 AA ✓. */
  --sumzy-footer-muted: rgba(26, 20, 16, 0.60);
}

.sumzy-summary--dark {
  --sumzy-sentiment-pos: #4ade80;   /* green-400 — 9.60:1 on #1e2228 AAA ✓ */
  --sumzy-sentiment-neu: #fbbf24;   /* amber-400 — 10.09:1 on #1e2228 AAA ✓ */
  --sumzy-sentiment-neg: #f87171;   /* red-400   — 5.85:1 on #1e2228 AA ✓ */
  /* Consider-column graphics: same bright value as --sumzy-sentiment-neu on dark
     (both amber-400 #fbbf24 — the graphics token coincides with the text token
     on dark because both are AAA on the dark card; no separate dark value needed).
     Declared explicitly so the consider-column graphics always follow the dark value. */
  --sumzy-consider: #fbbf24;        /* amber-400 — 10.09:1 on #1e2228 AAA ✓ */

  --sumzy-ai-pill-bg:    #4b3029;
  --sumzy-ai-pill-color: #FFEDE3;   /* 10.53:1 AAA ✓ */

  /* Sumzy's own dark palette. text/heading #EEE/#F4F4F5 on card #1A1A1A
     = 15–16:1 (verified by pixel). */
  --sumzy-card-bg: #1A1A1A;
  --sumzy-heading: #F4F4F5;
  --sumzy-text:    #EEEEEE;
  --sumzy-accent:  #FF6A2C;

  /* Structural border: swap black-alpha for white-alpha via the same custom
     property the card border reads, so a merchant's injected --sumzy-border
     (emitted at .sumzy-summary--dark specificity by Widget) still wins. */
  --sumzy-border: rgba(255, 255, 255, 0.12);

  /* A3: dark-card footer-muted. #EEEEEE at 60% on #1A1A1A ≈ #919191 → 5.08:1 AA ✓. */
  --sumzy-footer-muted: rgba(238, 238, 238, 0.60);
}

/* Footer separator and single-column theme divider on dark card */
.sumzy-summary--dark .sumzy-summary__footer {
  border-block-start-color: rgba(255, 255, 255, 0.10);
}
.sumzy-summary--dark .sumzy-summary__themes-neg {
  border-block-start-color: rgba(255, 255, 255, 0.08);
}

/* ============================================================
   §12 — B3(b) LOW-SIGNAL STATE (.sumzy-summary--low-signal)
   Card chrome kept (border/radius/bg) so the page doesn't shift
   when a summary later generates (CLS=0). No AI pill — no AI content.
   Icon: --sumzy-sentiment-neu (amber, informational).
   ============================================================ */
.sumzy-summary--low-signal .sumzy-summary__low-signal-inner {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding-block: 0.5em;
}
.sumzy-summary--low-signal .sumzy-summary__low-signal-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  /* Scale the info-circle to 1.5em relative to the widget base font */
  font-size: 1.5em;
  color: var(--sumzy-sentiment-neu, #b45309);
}
.sumzy-summary--low-signal .sumzy-summary__low-signal-icon svg {
  /* Inherit the font-size-scaled em from the parent span */
  width: 1em;
  height: 1em;
}
.sumzy-summary--low-signal .sumzy-summary__low-signal-msg {
  font-size: 0.9375em;
  line-height: 1.5;
  color: var(--sumzy-text, #1A1410);
  margin: 0;
}

/* ============================================================
   §13 — B3(a) SKELETON STATE (.sumzy-summary--skeleton)
   Shimmer placeholder that mirrors final layout for CLS=0.
   Shimmer gated to prefers-reduced-motion: no-preference.
   Under 'reduce', flat --_skel-base fill renders.
   ============================================================ */
.sumzy-summary--skeleton {
  /* Skeleton tokens — currentColor-relative for dark/light compat */
  --_skel-base: rgba(26, 20, 16, 0.08);   /* light rgba fallback */
  --_skel-hi:   rgba(26, 20, 16, 0.15);   /* light rgba fallback */
}
.sumzy-summary--skeleton.sumzy-summary--dark {
  --_skel-base: rgba(238, 238, 238, 0.08);
  --_skel-hi:   rgba(238, 238, 238, 0.15);
}
@supports (color: color-mix(in srgb, red 1%, blue)) {
  .sumzy-summary--skeleton {
    --_skel-base: color-mix(in srgb, currentColor 8%, transparent);
    --_skel-hi:   color-mix(in srgb, currentColor 15%, transparent);
  }
}

.sumzy-summary__skel-block {
  display: block;
  border-radius: 0.25em;
  background: var(--_skel-base);
}

/* Shimmer animation — only when motion is fine */
@keyframes sumzy-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .sumzy-summary--skeleton .sumzy-summary__skel-block {
    background: linear-gradient(
      90deg,
      var(--_skel-base) 25%,
      var(--_skel-hi)   50%,
      var(--_skel-base) 75%
    );
    background-size: 200% 100%;
    animation: sumzy-shimmer 1.6s ease-in-out infinite;
  }
}

/* Skeleton block sizes — em-relative */
.sumzy-summary__skel-badge {
  inline-size: 7em;
  block-size: 1.6em;
}
.sumzy-summary__skel-prose {
  block-size: 0.875em;
  margin-block-end: 0.5em;
}
.sumzy-summary__skel-chip {
  display: inline-block;
  inline-size: 5.5em;
  block-size: 1.6em;
}
.sumzy-summary__skel-footer {
  block-size: 0.875em;
  inline-size: 60%;
  margin-block-start: 0.75em;
}