/*
 * Sumzy shopper widget — production CSS (verdict-led aspect IA).
 *
 * Ported faithfully from the signed-off showcase
 * (docs/design/showcase/sumzy-widget-showcase.html) into the plugin's EXISTING
 * .sumzy-summary namespace with --sumzy-* CSS vars (owner ruling: NO rename).
 * The showcase's --sz-* token VALUES are mirrored into --sumzy-* preset blocks.
 *
 * Cardinal rules honored by the markup this styles: renders from the LOCAL table
 * only; the [AI] pill + sr-only "AI-generated" is mandatory; proportion is shown
 * ONLY via 1-3 dots; the drill-down split is qualitative (no counts, no quotes).
 *
 * The widget sets NO font-family and sizes everything in em — it inherits the
 * host store's typography. Colors come from an explicit token contract (6 theme
 * presets), never "inherit the theme text". Monochrome warm base + one orange
 * accent. Container queries size to the widget's own column, not the viewport.
 * CSS logical properties throughout for RTL / script-agnostic rendering.
 */

/* ============================================================
   §1 — CUSTOM PROPERTY DEFAULTS (base = Light theme)
   The --sumzy-* contract. Merchant overrides (Settings → Appearance,
   per-instance block/Elementor) override accent / radius / surface / text /
   heading / border / max-width via wp_add_inline_style + the root style attr.
   Theme preset modifier classes (§3) override the full set.
   ============================================================ */
.sumzy-summary {
  --sumzy-accent:        #FF6A2C;
  --sumzy-accent-fg:     #FFFFFF;   /* text on accent fill — white, owner-ruled sub-AA by design */
  --sumzy-accent-dark:   #B23A0E;   /* small orange text (AA on light); the [AI] pill ink */
  --sumzy-radius:        14px;

  --sumzy-card-bg:       #FFFFFF;   /* card surface; sentiment pastels color-mix off this */
  --sumzy-text:          #1B1813;   /* primary text — AA >= 4.5:1 on surface, every preset */
  --sumzy-heading:       #1B1813;   /* heading text */
  --sumzy-muted:         #68615A;   /* secondary text (count, disclosure, hint) — AA-checked.
                                       Darkened from #6F6760 in S110: the aspect chip's "(N)" count
                                       paints on the HOVER/EXPANDED chip ground, and that ground had
                                       to move 13% of the ink into the card to be perceptible at all
                                       (idle->hover was ΔE76 2.01, invisible). #68615A clears 4.5:1
                                       on every state ground of every preset with headroom, on the
                                       color-mix path AND the rgba fallback. Same value in
                                       sumzy.css, marketing.css and contrast.ts — one token. */
  --sumzy-faint:         #A59C92;   /* hairline labels / decorative glyphs (paired with text) */
  --sumzy-border:        #ECE7E0;   /* hairline borders + dividers */
  --sumzy-chip:          #F6F2EC;   /* skeleton bars; chips compute from currentColor */
  --sumzy-max-width:     100%;

  /* sentiment SOURCE hues — pastel fills are color-mixed PER THEME so the badge
     never glares as a fixed light blob on dark surfaces */
  --sumzy-pos:           #16A34A;
  --sumzy-mix:           #B45309;
  --sumzy-neg:           #DC2626;
  /* AA-deepened sentiment TEXT ink — one light-family set, locked against the
     worst-case (warm Paper) pastel fill so every light theme computes >=5.0:1 */
  --sumzy-pos-ink:       #0E6B32;
  --sumzy-mix-ink:       #883A0A;
  --sumzy-neg-ink:       #A31919;

  --sumzy-card-shadow:   0 1px 2px rgba(20, 20, 30, 0.05), 0 4px 20px rgba(20, 20, 30, 0.07);
}

/* ============================================================
   §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 the content-size (~645px). We re-cap
   the landmark at the theme's wide-size and re-center it so the card matches
   the wide product area (tabs / review list), not a narrow prose column.
   The doubled class raises specificity to (0,2,0) to beat the block-theme
   constrained rule on source-order ties.
   ============================================================ */
.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);
  margin-inline: auto;
  /* Padding container: the widget queries its PARENT's width (a container cannot
     respond to its own size). Drives the 20->30px desktop padding step below. */
  container-type: inline-size;
  container-name: sumzypad;
}

/* ============================================================
   §2a — SCOPED BOX-SIZING + INHERITED-PROPERTY RESET
   Scope our resets to the widget so it is predictable regardless of host-theme
   rule order. The margin/padding/list-style descendant reset clears aggressive
   theme resets (Flatsome/Woodmart/Avada/Divi). Applies to descendants only —
   not .sumzy-summary itself — so the card's own padding/margin are unaffected.
   ============================================================ */
.sumzy-summary,
.sumzy-summary *,
.sumzy-summary *::before,
.sumzy-summary *::after {
  box-sizing: border-box;
}
.sumzy-summary * {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ============================================================
   §3 — ROOT
   ============================================================ */
.sumzy-summary {
  position: relative;
  /* no font-family — INHERITS the host store font (brand law) */
  font-family: inherit;
  font-size: inherit;
  /* Theme-bleed resets — prevent aggressive themes leaking italic/caps/tracking. */
  font-style: normal;
  font-variant: normal;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0;
  text-align: start;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;

  color: var(--sumzy-text, #1B1813);
  background: var(--sumzy-card-bg, #FFFFFF);
  border: 1px solid var(--sumzy-border, #ECE7E0);
  border-radius: var(--sumzy-radius, 14px);
  box-shadow: var(--sumzy-card-shadow, 0 1px 2px rgba(20, 20, 30, 0.05), 0 4px 20px rgba(20, 20, 30, 0.07));

  /* 20px mobile / 30px wide — mirrored cross-runtime (Shopify + WP) spec. */
  padding: 20px;
  margin-block: 1.5em;
  inline-size: 100%;
  max-inline-size: var(--sumzy-max-width, 100%);
  margin-inline: auto;

  /* Container queries size internal layout to the widget's own width. */
  container-type: inline-size;
  container-name: sumzy;
}

@container sumzypad (min-width: 480px) {
  .sumzy-summary {
    padding: 30px;
  }
}

/* ============================================================
   §3a — MINIMAL LAYOUT MODIFIER (per-placement, block / Elementor)
   The manual-placement "Minimal" layout choice: a borderless variant — the
   chrome (border, shadow, card bg, box padding) drops away so the summary reads
   as inline content. Everything that makes it trustworthy (type, sentiment,
   aspects, footer rule, AI disclosure) is preserved. Block rhythm kept.
   ============================================================ */
.sumzy-summary--minimal {
  border: 0;
  box-shadow: none;
  background: transparent;
  padding-block: 0;
  padding-inline: 0;
}

/* ============================================================
   §4 — BAR: brand mark + heading + sentiment badge
   ============================================================ */
.sumzy-summary__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6em;
  margin-block-end: 1em;
}
.sumzy-summary__title {
  display: inline-flex;
  align-items: center;
  /* title row gap — item 8, owner 2026-06-25. */
  gap: 0.8em;
  min-inline-size: 0;
}
.sumzy-summary__heading {
  /* small-heading step (Tailwind text-xl) — item 6, owner 2026-06-25. */
  font-size: 1.25em;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.3;
  color: var(--sumzy-heading, #1B1813);
  white-space: nowrap;
  min-inline-size: 0;
}

/* ============================================================
   §5 — SENTIMENT BADGE
   THEME-DERIVED pastel fill via color-mix. NON-interactive so the thumbs never
   read as vote buttons: cursor:default, icon aria-hidden, the text label carries
   the meaning. 5-class verdict glossary → 3 colour leans; the LABEL distinguishes
   "Highly recommended" from "Mostly positive".
   ============================================================ */
.sumzy-summary__sentiment {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  /* label at body size (item 5, owner 2026-06-25) — same step as the prose. */
  font-size: 0.85em;
  font-weight: 600;
  line-height: 1;
  cursor: default;
  /* badge padding matches the aspect chip padding (item 9, owner 2026-06-25). */
  padding: 0.5em 0.8em;
  border-radius: 999px;
  border: 0;
  flex: none;
  white-space: nowrap;
  color: var(--_bdg-ink);
  /* rgba() fallback for Safari <15.4 (no color-mix): a soft tint of the surface. */
  background: var(--sumzy-chip, #F6F2EC);
}
@supports (color: color-mix(in srgb, red 1%, blue)) {
  .sumzy-summary__sentiment {
    background: color-mix(in srgb, var(--_bdg) 16%, var(--sumzy-card-bg, #FFFFFF));
  }
}
.sumzy-summary__sentiment-icon {
  inline-size: 1.05em;
  block-size: 1.05em;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--_bdg-ink);
}
.sumzy-summary__sentiment-icon svg {
  inline-size: 1em;
  block-size: 1em;
}
.sumzy-summary__sentiment[data-sentiment="strongly_positive"],
.sumzy-summary__sentiment[data-sentiment="mostly_positive"] {
  --_bdg: var(--sumzy-pos, #16A34A);
  --_bdg-ink: var(--sumzy-pos-ink, #0E6B32);
}
.sumzy-summary__sentiment[data-sentiment="mixed"] {
  --_bdg: var(--sumzy-mix, #B45309);
  --_bdg-ink: var(--sumzy-mix-ink, #883A0A);
}
.sumzy-summary__sentiment[data-sentiment="mostly_negative"],
.sumzy-summary__sentiment[data-sentiment="strongly_negative"] {
  --_bdg: var(--sumzy-neg, #DC2626);
  --_bdg-ink: var(--sumzy-neg-ink, #A31919);
}

/* ============================================================
   §6 — VERDICT HERO: score + 5-star row
   The single bold beat — highest-value element. Score larger than the gist;
   stars in the accent. Sourced from the WooCommerce all-time product rating
   (display-only — NEVER emits JSON-LD/aggregateRating). Toggleable.
   ============================================================ */
.sumzy-summary__hero {
  display: flex;
  flex-direction: column;
  gap: 0.9em;
}
.sumzy-summary__verdict-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex-wrap: wrap;
}
.sumzy-summary__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.34em;
}
.sumzy-summary__score {
  font-size: 1.75em;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sumzy-summary__score small {
  font-size: 0.44em;
  font-weight: 500;
  color: var(--sumzy-muted, #68615A);
  letter-spacing: 0;
  margin-inline-start: 0.12em;
}
.sumzy-summary__stars {
  display: inline-flex;
  gap: 1.5px;
  color: var(--sumzy-accent, #FF6A2C);
}
.sumzy-summary__stars svg {
  inline-size: 1.18em;
  block-size: 1.18em;
  display: block;
}
.sumzy-summary__star--empty {
  opacity: 0.24;
}

/* ============================================================
   §7 — GIST: product-only prose
   Larger margin BELOW the hero than within it → the gist reads as supporting
   body. When the verdict is off the gist leads, so its top margin collapses.
   ============================================================ */
.sumzy-summary__prose {
  /* gist at body size — item 10, owner 2026-06-25. */
  font-size: 1em;
  line-height: 1.62;
  color: var(--sumzy-text, #1B1813);
  margin: 1.3em 0 0;
}
.sumzy-summary--noverdict .sumzy-summary__prose {
  margin-block-start: 0;
}

/* ============================================================
   §8 — ASPECTS: ONE ranked list of chip BUTTONS + ONE shared drill-down panel
   BELOW the whole list (matching the signed-off showcase's single
   .sumzy__asp-panel under .sumzy__asp-list). Clicking a chip reveals that
   aspect's pre-rendered detail; another chip swaps it; clicking the ACTIVE chip
   (toggle off) or the panel close control closes it; at most one open at a time.

   Mechanism — MINIMAL delegated JS (assets/js/sumzy-widget.js), the sanctioned
   fallback once the owner required clicking the active chip to CLOSE its panel
   (single-open + toggle-off is impossible in pure CSS). Each chip is a
   `<button class="sumzy-summary__asp" aria-expanded aria-controls data-asp-index>`;
   ONE shared `.sumzy-summary__asp-panel` below the <ul> holds every aspect's
   server-rendered + escaped `.sumzy-summary__asp-detail[data-asp-index]` section,
   each starting `hidden`. The JS only flips the `hidden` attribute on the matching
   pre-rendered node + toggles aria-expanded / .is-active (NO client HTML assembly →
   no stored-XSS surface). Shadow-DOM-safe + wp_footer-floor-safe (document-level,
   late-bound, composedPath()). NO inline display:none anywhere
   (proportional-representation contract); closed = the HTML `hidden` attribute.
   ============================================================ */
.sumzy-summary__aspects {
  margin-block-start: 1.1em;
}
/* standalone reading label → --sumzy-muted (AA on every theme); --sumzy-faint is
   reserved for hairlines + decorative glyphs only. */
.sumzy-summary__asp-hint {
  font-size: 0.76em;
  color: var(--sumzy-muted, #68615A);
  margin-block-end: 0.65em;
}

/* the chip list — a wrapped row of chip buttons. The shared panel is a SIBLING
   below it (its own block), not floated out of this list. */
.sumzy-summary__asp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5em;
}
.sumzy-summary__asp-item {
  display: inline-flex;
  margin: 0;
  padding: 0;
}

/* Aspect lean → its sentiment hue, carried on --_alc (owner 2026-06-25 CORRECTION).
   The chip's trend glyph, proportion dots, and active-state border KEEP their lean
   colour — only the chip BACKGROUND is a neutral grey (see the chip rules below).
   We use the *-ink lean variant (the SAME AA-safe ink the sentiment badge uses for
   its foreground) rather than the raw --pos/--mix/--neg: on the neutral grey chip
   surface the raw saturated green falls to ~2.96:1, just under the 3:1 non-text AA
   floor, whereas --sumzy-pos-ink clears it on every preset (light ≈6:1, dark ≈9:1)
   while still reading clearly green/amber/red. Lean reads from BOTH the coloured
   glyph/dots AND the glyph SHAPE (up-right / wave / down-right, mirrored in RTL via
   the data-lean rules below) + the drill-down words. (The sentiment BADGE above
   keeps its pastel fill — see §5; the grey is scoped to the aspect chip's fill.) */
.sumzy-summary__asp[data-lean="pos"],
.sumzy-summary__asp-detail[data-lean="pos"] { --_alc: var(--sumzy-pos-ink, #0E6B32); }
.sumzy-summary__asp[data-lean="mix"],
.sumzy-summary__asp-detail[data-lean="mix"] { --_alc: var(--sumzy-mix-ink, #883A0A); }
.sumzy-summary__asp[data-lean="neg"],
.sumzy-summary__asp-detail[data-lean="neg"] { --_alc: var(--sumzy-neg-ink, #A31919); }

/* the chip = a real <button>. Theme-aware 5.5% ink tint bg (matching marketing.css
   and Shopify widget); ONLY the trend glyph + dots + active border carry the lean
   colour (--_alc). font:inherit + color reset so the button never inherits UA button
   chrome. Direct defensive resets prevent aggressive host themes (e.g. WoodMart
   :is(button,...) selectors) from injecting text-transform/letter-spacing/etc. */
.sumzy-summary__asp {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  font: inherit;
  font-family: inherit;
  line-height: 1;
  color: var(--sumzy-text, #1B1813);
  text-align: start;
  text-transform: none;
  letter-spacing: normal;
  background: rgba(0,0,0,0.055);
  border: 1px solid transparent;
  box-shadow: none;
  border-radius: 999px;
  padding: 0.5em 0.8em;
  font-size: 0.85em;
  min-block-size: 2.4em;
  -webkit-appearance: none;
  appearance: none;
  --_alc: var(--sumzy-mix-ink, #883A0A);
}
@supports (color: color-mix(in srgb, black, white)) {
  .sumzy-summary__asp {
    background: color-mix(in srgb, var(--sumzy-text, #1B1813) 5.5%, transparent);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .sumzy-summary__asp {
    transition: background 0.16s cubic-bezier(.22,.61,.36,1), border-color 0.16s cubic-bezier(.22,.61,.36,1);
  }
}
/* hover feedback: 13% text into card-bg. 8% was NOT a perceptible hover — it moved the
   ground 5-6 channels and ΔE76 2.01 (Light) / 1.81 (Paper) / 2.00 (Lumen), roughly a
   THIRD of the step the previously released build painted, because that build mixed over
   --sumzy-chip and --sumzy-chip is a different HUE from the card, not just a different
   lightness. Mixing over the card throws the hue shift away, so the whole delta has to
   come out of lightness, and lightness is what the "(N)" count's AA budget pays for.
   13% buys ΔE76 6.07 / 5.46 / 6.03 — above the previously released 5.57 / 3.84 / 5.26 —
   and it also repairs Ink, which measured 1.73 in that build and 1.96 here because Ink's
   --sumzy-chip (#FCFCFD) is nearly its card (#F5F6F8); a chip-derived hover could never
   have fixed Ink without repurposing a skeleton token. --sumzy-muted was darkened to
   #68615A / #645B4E (Paper) to pay for it — worst count ratio on any state ground of any
   preset on either cascade path is now 4.60:1. Dark and Aurora use their own
   higher-specificity hover rule below — the dark idle rule (0,2,0) otherwise wins over
   this generic hover (also 0,2,0) by document order, leaving those two presets with no
   perceptible hover feedback.
   The rgba() first is the pre-color-mix fallback (Safari <15.4 / Chrome <111). Without it
   the color-mix declaration is simply dropped on those engines and the light presets get
   NO hover state at all — idle, hover and expanded painted one identical ground, which is
   what shipped. .115 lands within ~2 channels of the 13% ink mix on all four light
   presets, and keeps the count at >=4.61:1 there. */
@media (hover: hover) and (pointer: fine) {
  .sumzy-summary__asp:hover {
    background: rgba(0,0,0,0.115);
  }
}
@supports (color: color-mix(in srgb, red 1%, blue)) {
  @media (hover: hover) and (pointer: fine) {
    .sumzy-summary__asp:hover {
      background: color-mix(in srgb, var(--sumzy-text, #1B1813) 13%, var(--sumzy-card-bg, #FFFFFF));
    }
  }
}
/* active chip — the chip whose panel is open (aria-expanded mirrors the JS state).
   Fill matches the hover ground (13%), which is distinct from idle (5.5%) so keyboard
   users (no hover state) see a visible darkening when a chip is expanded.
   Hover→expanded is NOT carried by fill on light presets: the count's AA budget is spent
   on the idle→hover step, so a third fill value would be 1-2 channels above hover —
   below perceptible threshold, decoration pretending to be information. The expanded
   state's signal is border-color (lean hue below), held to WCAG 1.4.11 3:1 and measuring
   4.64-6.05:1 across the light presets and all three leans (worst cell Paper/pos 4.64).
   Dark/Aurora carry all three states in fill via their own rules. */
.sumzy-summary__asp[aria-expanded="true"] {
  border-color: var(--_alc);
  background: rgba(0,0,0,0.115);
}
@supports (color: color-mix(in srgb, red 1%, blue)) {
  .sumzy-summary__asp[aria-expanded="true"] {
    background: color-mix(in srgb, var(--sumzy-text, #1B1813) 13%, var(--sumzy-card-bg, #FFFFFF));
  }
}
/* keyboard focus ring drawn directly on the focusable button. */
.sumzy-summary__asp:focus-visible {
  outline: 2px solid var(--sumzy-accent, #FF6A2C);
  outline-offset: 2px;
}
.sumzy-summary__asp-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--_alc);
}
.sumzy-summary__asp-ic svg {
  inline-size: 1.05em;
  block-size: 1.05em;
}
.sumzy-summary__asp-name {
  color: var(--sumzy-text, #1B1813);
  white-space: nowrap;
  text-transform: none;
  letter-spacing: normal;
}

/* proportion dots — frequency signal, 1-3 filled. coloured by lean. NO numbers.
   empty dot = hairline INSET ring (no fill); filled dot = solid lean colour. */
.sumzy-summary__dots {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  margin-inline-start: 0.12em;
}
.sumzy-summary__dots i {
  inline-size: 0.42em;
  block-size: 0.42em;
  border-radius: 50%;
  flex: none;
  background: transparent;
  /* rgba() fallback for Safari <15.4 */
  box-shadow: inset 0 0 0 1px var(--sumzy-faint, #A59C92);
}
@supports (color: color-mix(in srgb, red 1%, blue)) {
  .sumzy-summary__dots i {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_alc) 35%, transparent);
  }
}
.sumzy-summary__dots i.on {
  background: var(--_alc);
  box-shadow: none;
}

/* the shared drill-down panel — ONE container below the whole chip list, holding
   every aspect's pre-rendered detail. Starts `hidden` (UA display:none); the JS
   reveals it + the matching detail on a chip click. We respect [hidden] explicitly
   so a host stylesheet that reset `display` on divs can't strip the UA hide. */
.sumzy-summary__asp-panel[hidden] {
  display: none;
}
/* each per-aspect detail section. Closed = the HTML `hidden` attribute (UA
   display:none) — NO inline display:none (proportional-representation contract).
   The hairline above gives the "panel below the list" separator on the open one. */
.sumzy-summary__asp-detail {
  margin-block-start: 0.9em;
  padding-block-start: 0.9em;
  border-block-start: 1px solid var(--sumzy-border, #ECE7E0);
}
.sumzy-summary__asp-detail[hidden] {
  display: none;
}
.sumzy-summary__asp-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.7em;
}
.sumzy-summary__asp-detail-title {
  font-size: 0.9em;
  font-weight: 500;
  line-height: 1.35;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}
.sumzy-summary__asp-detail-title .sumzy-summary__asp-ic {
  color: var(--_alc);
}
/* close control — a <button> the delegated handler treats as "close": clicking it
   collapses the panel + returns focus to the chip that opened it. Sized to the 38px
   tap floor on touch (§ below). font:inherit + appearance reset strip UA button chrome. */
.sumzy-summary__asp-x {
  flex: none;
  cursor: pointer;
  font: inherit;
  color: var(--sumzy-faint, #A59C92);
  background: none;
  border: 0;
  padding: 0.2em;
  margin: -0.2em -0.2em 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.3em;
  min-inline-size: 1.9em;
  min-block-size: 1.9em;
  position: relative;
  -webkit-appearance: none;
  appearance: none;
}
@media (hover: hover) and (pointer: fine) {
  .sumzy-summary__asp-x:hover { color: var(--sumzy-text, #1B1813); }
}
.sumzy-summary__asp-x:focus-visible {
  outline: 2px solid var(--sumzy-accent, #FF6A2C);
  outline-offset: 1px;
}
.sumzy-summary__asp-x svg {
  inline-size: 1em;
  block-size: 1em;
}
/* contract-3.0: "(N)" count badge in the chip — visual-only (aria-hidden).
   Its ground is NOT --sumzy-chip: the chip button computes its fill from --sumzy-text
   over --sumzy-card-bg (see the chip rules above), so this is the text run whose AA
   budget caps how far the hover ground may move. Verified at 4.5:1 on idle, hover and
   expanded, on the color-mix path and the rgba fallback, on all six presets; worst cell
   4.60:1 (Lumen hover). Anything that darkens a chip state re-measures this. */
.sumzy-summary__asp-count {
  font-size: 0.92em;
  font-weight: 400;
  color: var(--sumzy-muted, #68615A);
  margin-inline-start: 0.2em;
}
/* contract-3.0: count line in the drill-down — plain muted, above the split / summary.
   --sumzy-muted clears AA 4.5:1 on --sumzy-card-bg on all 6 themes. */
.sumzy-summary__asp-count-line {
  font-size: 0.8em;
  line-height: 1.5;
  color: var(--sumzy-muted, #68615A);
  margin: 0.5em 0 0;
}
/* Positive/negative count phrases within the count line — use ink tokens which clear
   AA 4.5:1 on --sumzy-card-bg on all 6 themes (light ≈6:1, dark ≈9:1). */
.sumzy-summary__asp-count-pos { color: var(--sumzy-pos-ink); font-weight: 500; }
.sumzy-summary__asp-count-neg { color: var(--sumzy-neg-ink); font-weight: 500; }
.sumzy-summary__asp-split {
  font-size: 0.85em;
  line-height: 1.5;
  color: var(--sumzy-muted, #68615A);
  margin: 0.5em 0 0;
}
.sumzy-summary__asp-split b {
  color: var(--sumzy-text, #1B1813);
  font-weight: 600;
}
.sumzy-summary__asp-detail-sum {
  font-size: 0.87em;
  line-height: 1.58;
  color: var(--sumzy-text, #1B1813);
  margin: 0.55em 0 0;
}

/* RTL: mirror the DIRECTIONAL trend arrows (up=good / down=concern) so vertical
   sense is preserved when the layout flips. The "mixed" wave is non-directional. */
[dir="rtl"] .sumzy-summary__asp[data-lean="pos"] .sumzy-summary__asp-ic svg,
[dir="rtl"] .sumzy-summary__asp[data-lean="neg"] .sumzy-summary__asp-ic svg,
[dir="rtl"] .sumzy-summary__asp-detail[data-lean="pos"] .sumzy-summary__asp-detail-title .sumzy-summary__asp-ic svg,
[dir="rtl"] .sumzy-summary__asp-detail[data-lean="neg"] .sumzy-summary__asp-detail-title .sumzy-summary__asp-ic svg {
  transform: scaleX(-1);
}

/* ============================================================
   §9 — FOOTER: based on N + info explainer + AI pill + by Sumzy
   ============================================================ */
.sumzy-summary__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7em;
  flex-wrap: wrap;
  margin-block-start: 1.15em;
  padding-block-start: 0.9em;
  border-block-start: 1px solid var(--sumzy-border, #ECE7E0);
}

/* "How are reviews summarized?" trigger: count + circle-i icon. */
.sumzy-summary__howto {
  flex: 0 1 auto;
  min-inline-size: 0;
}
.sumzy-summary__howto-trigger {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  cursor: pointer;
}
.sumzy-summary__howto-trigger::-webkit-details-marker { display: none; }
.sumzy-summary__howto-trigger::marker { content: ""; display: none; }
.sumzy-summary__howto-trigger:focus-visible {
  outline: 2px solid var(--sumzy-accent, #FF6A2C);
  outline-offset: 2px;
  border-radius: 2px;
}
.sumzy-summary__review-count {
  font-size: 0.8em;
  color: var(--sumzy-muted, #68615A);
}
.sumzy-summary__review-count b,
.sumzy-summary__review-count strong {
  color: var(--sumzy-text, #1B1813);
  font-weight: 500;
}
.sumzy-summary__info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.7em;
  block-size: 1.7em;
  margin-block: -0.35em;
  color: var(--sumzy-faint, #A59C92);
  position: relative;
}
.sumzy-summary__info-icon svg {
  inline-size: 1.05em;
  block-size: 1.05em;
}
@media (hover: hover) and (pointer: fine) {
  .sumzy-summary__howto-trigger:hover .sumzy-summary__info-icon {
    color: var(--sumzy-muted, #68615A);
  }
}

/* the disclosure cluster: [AI] pill + "summary" + "by Sumzy". */
.sumzy-summary__attrib-group {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.78em;
  color: var(--sumzy-muted, #68615A);
  margin-inline-start: auto;
}
.sumzy-summary__disclosure {
  display: inline;
}
.sumzy-summary__attribution {
  white-space: nowrap;
}
/* Higher specificity (0,2,0) so theme link resets don't win. */
.sumzy-summary .sumzy-summary__attribution-link {
  color: var(--sumzy-text, #1B1813);
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.85;
}
.sumzy-summary .sumzy-summary__attribution-link:focus-visible {
  outline: 2px solid var(--sumzy-accent, #FF6A2C);
  outline-offset: 2px;
  border-radius: 2px;
}

/* mandatory, non-suppressible AI pill — a faint warm chip, aria-hidden, ALWAYS
   paired with sr-only "AI-generated" so SR reads "AI-generated summary". */
.sumzy-summary__ai-pill {
  background: var(--sumzy-chip, #F6F2EC);
  color: var(--sumzy-accent-dark, #B23A0E);
  font-size: 0.92em;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  padding: 0.3em 0.46em;
  border-radius: 0.4em;
  flex: none;
  white-space: nowrap;
}
@supports (color: color-mix(in srgb, red 1%, blue)) {
  .sumzy-summary__ai-pill {
    background: color-mix(in srgb, var(--sumzy-accent, #FF6A2C) 13%, var(--sumzy-card-bg, #FFFFFF));
  }
}

/* the explainer — native <details> wrapping the count-line <summary> + the
   collapsible body. The count line (the <summary>) sits on the SAME footer row as
   the [AI] disclosure block (.attrib-group), space-between (owner 2026-06-25): the
   <details> is a 0 1 auto flex sibling so it shrinks to the count trigger on the
   start edge while .attrib-group's margin-inline-start:auto pins the disclosure to
   the end edge. When OPENED the <details> takes the full row (flex-basis:100%) so
   its body renders full-width BELOW the line — opening expands the footer area, but
   the common CLOSED state keeps count + disclosure on one line. The footer's
   flex-wrap handles narrow widths: when there isn't room for both on a line they
   stack (the container-query rule below makes that explicit on a very narrow card). */
.sumzy-summary__explainer {
  flex: 0 1 auto;
  min-inline-size: 0;
  margin: 0;
}
.sumzy-summary__explainer[open] {
  flex-basis: 100%;
  margin-block-start: 0.15em;
}
.sumzy-summary__explainer > summary {
  list-style: none;
}
.sumzy-summary__explainer > summary::-webkit-details-marker { display: none; }
.sumzy-summary__explainer-body {
  font-size: 0.78em;
  line-height: 1.6;
  color: var(--sumzy-muted, #68615A);
  background: var(--sumzy-chip, #F6F2EC);
  border: 1px solid var(--sumzy-border, #ECE7E0);
  border-radius: 0.6em;
  padding: 0.85em 1em;
  margin-block-start: 0.6em;
}
@supports (color: color-mix(in srgb, red 1%, blue)) {
  .sumzy-summary__explainer-body {
    background: color-mix(in srgb, var(--sumzy-accent, #FF6A2C) 5%, var(--sumzy-card-bg, #FFFFFF));
  }
}
.sumzy-summary__explainer-body b {
  color: var(--sumzy-text, #1B1813);
  font-weight: 600;
}

/* merchant-authored disclaimer — STRUCTURALLY SEPARATE from the [AI] pill: its
   own full-width block, never inside .attrib-group. */
.sumzy-summary__merchant-disclaimer {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.8em;
  line-height: 1.5;
  color: var(--sumzy-muted, #68615A);
}

/* coarse pointers (touch): extend tap targets to the 38px floor with a
   transparent overlay — adds ZERO layout height. */
@media (pointer: coarse) {
  .sumzy-summary__info-icon::before,
  .sumzy-summary__asp-x::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    inline-size: 38px;
    block-size: 38px;
  }
  .sumzy-summary__asp { min-block-size: 38px; }
}

/* sr-only — for the "-generated" hidden text + chip/aspect addenda. */
.sumzy-sr-only {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   §10 — LOW-SIGNAL STATE: no AI pill, no count (nothing generated to disclose)
   ============================================================ */
.sumzy-summary__lowsig {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
}
.sumzy-summary__lowsig-icon {
  flex: none;
  inline-size: 1.9em;
  block-size: 1.9em;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sumzy-mix-ink, #883A0A);
  background: var(--sumzy-chip, #F6F2EC);
}
@supports (color: color-mix(in srgb, red 1%, blue)) {
  .sumzy-summary__lowsig-icon {
    background: color-mix(in srgb, var(--sumzy-mix, #B45309) 14%, var(--sumzy-card-bg, #FFFFFF));
  }
}
.sumzy-summary__lowsig-icon svg {
  inline-size: 1em;
  block-size: 1em;
}
.sumzy-summary__lowsig-msg {
  font-size: 0.9em;
  line-height: 1.55;
  margin: 0;
}
.sumzy-summary__lowsig-msg b {
  font-weight: 600;
  color: var(--sumzy-text, #1B1813);
  display: block;
  margin-block-end: 0.15em;
}
.sumzy-summary__lowsig-msg span {
  color: var(--sumzy-muted, #68615A);
}

/* ============================================================
   §11 — SKELETON / LOADING STATE
   ============================================================ */
.sumzy-summary__sk {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
}
.sumzy-summary__sk-row {
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.sumzy-summary__sk-bar {
  block-size: 0.9em;
  border-radius: 0.4em;
  background: var(--sumzy-chip, #F6F2EC);
  position: relative;
  overflow: hidden;
}
.sumzy-summary__sk-bar--mark { inline-size: 1.45em; block-size: 1.45em; border-radius: 0.3em; flex: none; }
.sumzy-summary__sk-bar--title { inline-size: 11em; }
/* badge placeholder height tracks the resolved sentiment badge (1em label + 0.5em
   block padding ≈ 2.05em) so first paint → content lands with no layout shift. */
.sumzy-summary__sk-bar--badge { inline-size: 6em; block-size: 2.05em; border-radius: 999px; margin-inline-start: auto; }
.sumzy-summary__sk-bar--score { inline-size: 3.4em; block-size: 1.5em; }
.sumzy-summary__sk-bar--stars { inline-size: 6em; block-size: 1.1em; }
.sumzy-summary__sk-bar--line { inline-size: 100%; }
.sumzy-summary__sk-bar--w95 { inline-size: 95%; }
.sumzy-summary__sk-bar--w88 { inline-size: 88%; }
.sumzy-summary__sk-bar--w70 { inline-size: 70%; }
.sumzy-summary__sk-lines {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin-block-start: 0.3em;
}
.sumzy-summary__sk-chips {
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
  margin-block-start: 0.25em;
}
.sumzy-summary__sk-chip {
  inline-size: 6.2em;
  block-size: 2.2em;
  border-radius: 999px;
  background: var(--sumzy-chip, #F6F2EC);
  position: relative;
  overflow: hidden;
}
.sumzy-summary__sk-chip--s2 { inline-size: 7.4em; }
.sumzy-summary__sk-chip--s3 { inline-size: 5em; }
.sumzy-summary__sk-chip--s4 { inline-size: 6.6em; }
@media (prefers-reduced-motion: no-preference) {
  .sumzy-summary__sk-bar::after,
  .sumzy-summary__sk-chip::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.06), transparent);
    transform: translateX(-100%);
    animation: sumzy-shimmer 1.4s ease-in-out infinite;
  }
}
@supports (color: color-mix(in srgb, red 1%, blue)) {
  @media (prefers-reduced-motion: no-preference) {
    .sumzy-summary__sk-bar::after,
    .sumzy-summary__sk-chip::after {
      background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sumzy-text, #1B1813) 8%, transparent), transparent);
    }
  }
}
@keyframes sumzy-shimmer {
  100% { transform: translateX(100%); }
}

/* ============================================================
   §12 — CONTAINER-QUERY RESPONSIVE (adapts to host column, not viewport)
   ============================================================ */
@container sumzy (max-width: 360px) {
  .sumzy-summary__prose { font-size: 0.96em; }
  /* On a narrow card the footer count line + [AI] disclosure block stack: the
     <details> takes the full row so the disclosure wraps onto its own line below
     (item 4 — horizontal on wide, vertical when there's too little space). */
  .sumzy-summary__explainer { flex-basis: 100%; }
  .sumzy-summary__attrib-group { margin-inline-start: 0; }
}
@container sumzy (max-width: 250px) {
  .sumzy-summary__heading { display: none; }
}
/* Fallback for browsers without container-query support (Safari <16, Chrome <105).
   flex-wrap: wrap is now unconditional on .sumzy-summary__header (§4) so no
   fallback block is needed for it. */
@supports not (container-type: inline-size) {
  /* (reserved for future fallback rules) */
}

/* compact density (per-instance / mobile). */
.sumzy-summary--compact { padding: 0.95em 1.05em 1em; }
.sumzy-summary--compact .sumzy-summary__prose { font-size: 0.88em; }
.sumzy-summary--compact .sumzy-summary__aspects { margin-block-start: 0.9em; }

/* ============================================================
   §13 — SIX THEMES (each AA on its own surface)
   Light (base, §1) · Paper · Ink · Dark + the two showpieces Lumen (light) /
   Aurora (dark). Showpieces (Lumen / Aurora) use a multi-color AI-magic mesh
   (orange + blue + green radial gradients) animated by sz-aurora. The
   AI-gradient-ban note is WITHDRAWN per A6 reconciliation (2026-06-27); the
   multi-color mesh is canonical and mirrors the backend + Shopify runtimes.
   Reduced-motion → clean static card.

   Plugin appearance modes map to these presets in Renderer::open_root():
     default_light → (base / .sumzy-summary--light)
     default_dark  → .sumzy-summary--dark
     preset_sand   → .sumzy-summary--paper   (warm light editorial)
     preset_ink    → .sumzy-summary--ink     (cool crisp light)
   The two showpieces (Lumen / Aurora) are reachable via the per-instance /
   merchant appearance system as .sumzy-summary--lumen / --aurora.
   ============================================================ */

/* ① LIGHT — alias re-states base tokens so it can be forced in a dark host. */
.sumzy-summary--light {
  --sumzy-card-bg: #FFFFFF; --sumzy-text: #1B1813; --sumzy-muted: #68615A; --sumzy-faint: #A59C92;
  --sumzy-border: #ECE7E0; --sumzy-chip: #F6F2EC;
  --sumzy-pos: #16A34A; --sumzy-mix: #B45309; --sumzy-neg: #DC2626;
  --sumzy-pos-ink: #0E6B32; --sumzy-mix-ink: #883A0A; --sumzy-neg-ink: #A31919;
  --sumzy-accent-dark: #B23A0E;
}
/* Sumzy's own light palette alias (plugin 'default_light' root class — kept so
   open_root()'s .sumzy-summary--brand-light continues to resolve). */
.sumzy-summary--brand-light {
  --sumzy-card-bg: #FFFFFF; --sumzy-text: #1B1813; --sumzy-heading: #1B1813;
  --sumzy-muted: #68615A; --sumzy-faint: #A59C92; --sumzy-border: #ECE7E0; --sumzy-chip: #F6F2EC;
  --sumzy-accent: #FF6A2C; --sumzy-accent-dark: #B23A0E;
}

/* ② PAPER — warm off-white, editorial calm (plugin preset_sand). */
/* --sumzy-muted is Paper's own warm value, not the global token: Paper's card is the darkest of the
   four light presets, so its chip grounds sit lowest and its "(N)" count is the AA floor for the
   whole widget. #74695A measured 4.35:1 and #6D6355 measured 4.54:1 on the 8% hover ground; at the
   13% hover ground this build needs (see the chip rules above) #6D6355 falls to 4.20:1. #645B4E
   keeps the warm cast and measures, on the color-mix path, 5.98 card / 5.40 idle / 4.67 hover =
   expanded, and on the rgba fallback path 5.30 idle / 4.61 hover = expanded. Same value ships on
   Shopify + marketing — one token, three runtimes. */
.sumzy-summary--paper {
  --sumzy-card-bg: #F7F2E9; --sumzy-text: #2A2419; --sumzy-heading: #2A2419;
  --sumzy-muted: #645B4E; --sumzy-faint: #B3A690;
  --sumzy-border: #E8DDCA; --sumzy-chip: #FFFDF8; --sumzy-radius: 12px;
  --sumzy-pos-ink: #0E6B32; --sumzy-mix-ink: #883A0A; --sumzy-neg-ink: #A31919;
  --sumzy-accent-dark: #B23A0E;
  --sumzy-card-shadow: 0 1px 2px rgba(20, 20, 30, 0.05), 0 4px 20px rgba(20, 20, 30, 0.07);
}

/* ③ INK — cool crisp LIGHT theme (near-black ink on cool off-white) (plugin preset_ink alias). */
.sumzy-summary--ink {
  --sumzy-card-bg: #F5F6F8; --sumzy-text: #14171D; --sumzy-heading: #14171D;
  --sumzy-muted: #585E6B; --sumzy-faint: #969CAB;
  --sumzy-border: #E3E5EA; --sumzy-chip: #FCFCFD; --sumzy-radius: 9px;
  --sumzy-pos-ink: #0E6B32; --sumzy-mix-ink: #883A0A; --sumzy-neg-ink: #A31919;
  --sumzy-accent-dark: #B23A0E;
  --sumzy-card-shadow: 0 1px 2px rgba(20, 20, 30, 0.05), 0 4px 20px rgba(20, 20, 30, 0.07);
}

/* ④ DARK — neutral dark surface. lift sentiment hues + AI pill for AA on dark. */
.sumzy-summary--dark {
  --sumzy-card-bg: #17181C; --sumzy-text: #ECEDF0; --sumzy-heading: #ECEDF0;
  --sumzy-muted: #A4A8B0; --sumzy-faint: #62666E;
  --sumzy-border: rgba(255,255,255,.10); --sumzy-chip: rgba(255,255,255,.06);
  --sumzy-pos: #4AD991; --sumzy-mix: #F0A23C; --sumzy-neg: #FF6F6F;
  --sumzy-pos-ink: #4AD991; --sumzy-mix-ink: #F0A23C; --sumzy-neg-ink: #FF6F6F;
  --sumzy-accent-dark: #FF9A6B;
  --sumzy-card-shadow: 0 1px 2px rgba(20, 20, 30, 0.05), 0 4px 20px rgba(20, 20, 30, 0.07);
}
/* Dark theme: restore white-tint idle chip (base rule uses black tint for light themes). */
.sumzy-summary--dark .sumzy-summary__asp,
.sumzy-summary--aurora .sumzy-summary__asp {
  background: rgba(255,255,255,0.06);
}
@supports (color: color-mix(in srgb, black, white)) {
  .sumzy-summary--dark .sumzy-summary__asp,
  .sumzy-summary--aurora .sumzy-summary__asp {
    background: color-mix(in srgb, var(--sumzy-text, #ECEDF0) 6%, transparent);
  }
}
/* Dark/Aurora hover and expanded — these presets use a light-text tint on a dark surface
   so a visible step means going whiter, not darker. The dark idle rule above (specificity
   0,2,0) wins over the generic hover (also 0,2,0, 600+ lines earlier in source) by
   document order, killing hover feedback on those presets entirely. Rules here carry
   0,3,0 (.dark + .asp + :hover / [aria-expanded]) so they win reliably regardless of
   position. 12% = Δ≈13 ch from idle; 16% = Δ≈8 ch from hover.
   AA, measured per state on BOTH cascade paths rather than quoted for one of them —
   the previous note here read "Dark ≥ 5.40:1, Aurora ≥ 5.79:1 on the hover ground",
   which was the color-mix hover figure for Dark and the color-mix EXPANDED figure for
   Aurora, and neither described the rgba path these rules also serve:
     Dark   (#A4A8B0)  color-mix  idle 6.44  hover 5.40  expanded 4.76
                       rgba       idle 6.35  hover 5.24  expanded 4.55
     Aurora (#ABB3C0)  color-mix  idle 7.84  hover 6.60  expanded 5.79
                       rgba       idle 7.78  hover 6.47  expanded 5.63
   Aurora's row above is computed against the SOLID --sumzy-card-bg. Aurora really paints
   a mesh (::before glows) under a scrim (::after), and a static resolver cannot integrate
   a gradient — so those are approximations, and naming them without saying so is how a
   wrong number lives in a comment. Measured in Chromium on the composited pixel with the
   mesh painting, Aurora reads 7.02 idle / 5.78 hover / 5.09 expanded: warmer ground,
   lower ratios, still clear. Lumen is the same story (5.28 / 4.59 / 4.59 painted).
   The floor is 4.5, so the binding value on these two presets is Dark's expanded
   ground on the rgba path at 4.55 — 0.05 of headroom. Do not deepen 16% further
   without re-measuring that cell. */
@media (hover: hover) and (pointer: fine) {
  .sumzy-summary--dark .sumzy-summary__asp:hover,
  .sumzy-summary--aurora .sumzy-summary__asp:hover {
    background: rgba(255,255,255,0.12);
  }
}
@supports (color: color-mix(in srgb, black, white)) {
  @media (hover: hover) and (pointer: fine) {
    .sumzy-summary--dark .sumzy-summary__asp:hover,
    .sumzy-summary--aurora .sumzy-summary__asp:hover {
      background: color-mix(in srgb, var(--sumzy-text, #ECEDF0) 12%, transparent);
    }
  }
}
.sumzy-summary--dark .sumzy-summary__asp[aria-expanded="true"],
.sumzy-summary--aurora .sumzy-summary__asp[aria-expanded="true"] {
  background: rgba(255,255,255,0.16);
}
@supports (color: color-mix(in srgb, red 1%, blue)) {
  .sumzy-summary--dark .sumzy-summary__asp[aria-expanded="true"],
  .sumzy-summary--aurora .sumzy-summary__asp[aria-expanded="true"] {
    background: color-mix(in srgb, var(--sumzy-text, #ECEDF0) 16%, transparent);
  }
}
.sumzy-summary--dark .sumzy-summary__ai-pill {
  background: var(--sumzy-chip, rgba(255,255,255,.06));
  color: var(--sumzy-accent-dark, #FF9A6B);
}
@supports (color: color-mix(in srgb, red 1%, blue)) {
  .sumzy-summary--dark .sumzy-summary__ai-pill {
    background: color-mix(in srgb, var(--sumzy-accent, #FF6A2C) 22%, transparent);
  }
}

/* ⑤ LUMEN — flashy LIGHT showpiece. Multi-color AI-magic mesh (orange + blue +
   green) drifts behind content. Text on near-white surface, AA. */
.sumzy-summary--lumen {
  --sumzy-card-bg: #FFFDFB; --sumzy-text: #1B1813; --sumzy-heading: #1B1813;
  --sumzy-muted: #68615A; --sumzy-faint: #A59C92;
  --sumzy-border: #F1E8E0; --sumzy-chip: #FBF2EA; --sumzy-radius: 17px;
  --sumzy-pos-ink: #0E6B32; --sumzy-mix-ink: #883A0A; --sumzy-neg-ink: #A31919;
  --sumzy-accent-dark: #B23A0E;
  --sumzy-card-shadow: 0 1px 2px rgba(20, 20, 30, 0.05), 0 4px 20px rgba(20, 20, 30, 0.07);
  overflow: hidden;
  isolation: isolate;
}
.sumzy-summary--lumen::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 48% at 16% 12%, rgba(255,106,44,.46), transparent 70%),
    radial-gradient(46% 52% at 88% 10%, rgba(56,134,255,.34), transparent 72%),
    radial-gradient(52% 60% at 72% 98%, rgba(22,170,120,.34), transparent 72%);
  filter: blur(28px) saturate(130%);
}
@media (prefers-reduced-motion: no-preference) {
  .sumzy-summary--lumen::before {
    animation: sumzy-aurora 26s ease-in-out infinite alternate;
  }
}
/* scrim: settle the drifting glow back toward the solid surface behind the
   content column so AA ratios (computed vs the solid surface) hold under motion. */
.sumzy-summary--lumen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 50%,
    var(--sumzy-card-bg, #FFFDFB) 0%,
    rgba(255,253,251,.62) 58%,
    transparent 100%);
}
@supports (color: color-mix(in srgb, red 1%, blue)) {
  .sumzy-summary--lumen::after {
    background: radial-gradient(120% 100% at 50% 50%,
      color-mix(in srgb, var(--sumzy-card-bg, #FFFDFB) 80%, transparent) 0%,
      color-mix(in srgb, var(--sumzy-card-bg, #FFFDFB) 48%, transparent) 58%,
      transparent 100%);
  }
}
.sumzy-summary--lumen > * { position: relative; z-index: 1; }

/* ⑥ AURORA — flashy DARK showpiece. Multi-color AI-magic mesh (orange + blue +
   green) on deep ink. Text sits on the solid base, AA-safe. */
.sumzy-summary--aurora {
  --sumzy-card-bg: #0E1118; --sumzy-text: #F2F4F8; --sumzy-heading: #F2F4F8;
  --sumzy-muted: #ABB3C0; --sumzy-faint: #6B7480;
  --sumzy-border: rgba(255,255,255,.10); --sumzy-chip: rgba(255,255,255,.06); --sumzy-radius: 16px;
  --sumzy-pos: #4AD991; --sumzy-mix: #F2A93F; --sumzy-neg: #FF6F6F;
  --sumzy-pos-ink: #4AD991; --sumzy-mix-ink: #F2A93F; --sumzy-neg-ink: #FF6F6F;
  --sumzy-accent-dark: #FFA978;
  --sumzy-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 2px rgba(20, 20, 30, 0.05), 0 4px 20px rgba(20, 20, 30, 0.07);
  overflow: hidden;
  isolation: isolate;
}
.sumzy-summary--aurora::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(44% 54% at 22% 28%, rgba(255,106,44,.64), transparent 70%),
    radial-gradient(48% 56% at 80% 20%, rgba(56,134,255,.56), transparent 72%),
    radial-gradient(54% 62% at 62% 88%, rgba(22,170,120,.52), transparent 72%);
  filter: blur(32px) saturate(135%);
}
@media (prefers-reduced-motion: no-preference) {
  .sumzy-summary--aurora::before {
    animation: sumzy-aurora 28s ease-in-out infinite alternate;
  }
}
.sumzy-summary--aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 50%,
    var(--sumzy-card-bg, #0E1118) 0%,
    rgba(14,17,24,.60) 58%,
    transparent 100%);
}
@supports (color: color-mix(in srgb, red 1%, blue)) {
  .sumzy-summary--aurora::after {
    background: radial-gradient(120% 100% at 50% 50%,
      color-mix(in srgb, var(--sumzy-card-bg, #0E1118) 80%, transparent) 0%,
      color-mix(in srgb, var(--sumzy-card-bg, #0E1118) 46%, transparent) 58%,
      transparent 100%);
  }
}
.sumzy-summary--aurora > * { position: relative; z-index: 1; }
.sumzy-summary--aurora .sumzy-summary__ai-pill {
  color: var(--sumzy-accent-dark, #FFA978);
}
@supports (color: color-mix(in srgb, red 1%, blue)) {
  .sumzy-summary--aurora .sumzy-summary__ai-pill {
    background: color-mix(in srgb, var(--sumzy-accent, #FF6A2C) 24%, transparent);
  }
}

@keyframes sumzy-aurora {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.05) rotate(0deg); }
  100% { transform: translate3d(3%, 2%, 0)  scale(1.13) rotate(7deg); }
}

/* ============================================================
   §13b — WCAG 1.4.11 non-text contrast: light themes
   Brand orange #FF6A2C is ~3.05:1 on pure white but drops below 3:1 on the
   coloured backgrounds of Paper (#F7F2E9 ~2.9:1) and similar warm/cool surfaces.
   Use the dark accent (#B23A0E, ≥6:1 on all light surfaces) for interactive focus
   outlines on every light theme. The verdict STAR stays brand orange (text-redundant
   via the adjacent score — 1.4.11 note exemption; owner-signed-off showcase).
   ============================================================ */
.sumzy-summary--light :focus-visible,
.sumzy-summary--brand-light :focus-visible,
.sumzy-summary--paper :focus-visible,
.sumzy-summary--ink :focus-visible,
.sumzy-summary--lumen :focus-visible {
  outline-color: var(--sumzy-accent-dark, #B23A0E);
}

/* ============================================================
   §14 — REDUCED MOTION: every theme resolves to a clean static card
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sumzy-summary,
  .sumzy-summary::before,
  .sumzy-summary::after,
  .sumzy-summary * {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   §15 — PULSE (Item 7: ?sumzy_pulse=1 highlight on wizard "View it live")
   Progressive enhancement; the JS adds .sz-pulse for 2 s then removes it.
   No layout shift: outline does not affect box model.
   prefers-reduced-motion: JS skips adding the class entirely.
   ============================================================ */
@keyframes sumzy-pulse-outline {
  0%   { outline-offset: 0;   outline-color: var(--sumzy-accent, #FF6A2C); }
  50%  { outline-offset: 4px; outline-color: var(--sumzy-accent, #FF6A2C); }
  100% { outline-offset: 0;   outline-color: transparent; }
}

.sumzy-summary.sz-pulse {
  outline: 2px solid var(--sumzy-accent, #FF6A2C);
  outline-offset: 0;
  border-radius: var(--sumzy-radius, 12px);
  animation: sumzy-pulse-outline 2s ease-out forwards;
}