/* design-allow: SP-01 -- see the real reasoning right above the
   .lib-trust-strip rule below (a deliberate compact-band correction,
   not canonical section rhythm). Marker placed on this file's first
   line because of a real, separate qa-design-enforcement.js quirk this
   pass found: the file's very first CSS rule always reports at line 1
   when preceded by a large comment (the selector-capture regex has no
   left boundary other than the previous `}` or string start, so it
   greedily includes everything back to position 0) -- reported to the
   Phase 4 correction pass' own findings, not fixed here to avoid a
   second, riskier regex change under this pass' real time budget. */
/*
 * Trust Strip / Authority Band -- TRU-01. Phase 4 convergence
 * (catalog/governance/COMPONENT_CONVERGENCE_AUDIT.md): this is now the
 * single canonical Authority/Trust Band, composing
 * components/authority-item (UI-025) instead of hand-rolling its own
 * item markup/star SVG. Converges three previously-separate real
 * implementations: this file's own pre-Phase-4 item CSS (a real,
 * independent duplicate star SVG -- removed), the Hero Authority Band
 * (adapters/wordpress/generation/generation-hhds.css .hhds-hero__authority*
 * -- placement/motion behavior generalized here, Path B still emits its
 * own class names but the PHP that decides content/types is now shared,
 * see section-renderer.php's hhds_render_authority_band()), and Maggy
 * Prestige Fit's real trust-bar.css (duplicate-pass ticker structure --
 * not its emoji icons; its edge-fade mask technique was tried and
 * dropped, see the motion track rules below, in favor of PAT-001
 * Marquee's simpler plain-overflow:hidden precedent).
 */

/*
 * Human review correction (2026-08-25): the standalone surface was
 * --lib-color-primary-strong -- a real, live token, but the PRIMARY
 * (brand-forward/CTA) responsibility, not a neutral-dark one, so the
 * canonical default read as one specific saturated brand blue instead
 * of a generic trust band. Height: real HHDS evidence (assets/css/
 * layouts/service-trust.css) uses its own --space-8 for this exact
 * band's padding-block -- --lib-space-section-y (48-80px) was a full
 * section-rhythm value, not this component's real evidence-backed
 * density.
 *
 * Governance convergence pass (2026-08-26): --lib-gradient-deep was a
 * real, evidence-backed "neutral dark strip" precedent -- but it is a
 * PERMANENT, Canvas-independent identity token (see catalog/governance/
 * CANVAS_AUTHORITY_MODEL.md), so TRU-01 always rendered dark regardless
 * of Canvas: Light/Dark -- a real, human-confirmed parallel theme
 * authority (a component unilaterally owning its own permanent theme),
 * not a "deliberately fixed identity" exception in the same sense
 * Hero's own media-brightness case is. Converged onto the real,
 * already-existing, Canvas-controlled page-context tier instead:
 * --lib-color-panel-soft (background) + --lib-color-ink (text) are the
 * same tokens an ordinary data-surface="PANEL" section already uses,
 * genuinely resolving light under Canvas: Light and dark under Canvas:
 * Dark (previews/assets/canvas-tokens.js). A real border
 * (--lib-color-border) replaces the old dark gradient's own visual
 * separation from the page, since panel-soft alone doesn't read as
 * "elevated" against a similarly light page the way a dark band did
 * unconditionally.
 *
 * design-allow: SP-01 -- deliberately not canonical section padding
 * (--lib-space-section-y): the whole point of this human-review
 * correction is that a trust/authority band must read as compact, not
 * as another major section -- see the real HHDS evidence cited above.
 *
 * Correction pass 2 (2026-08-25): --space-8 (32px/side) was still too
 * much once measured against this band's own real tallest row (a
 * rating item's real 2-line score+stars/label stack, ~52px) -- total
 * band height (116px) left roughly as much empty padding as content.
 * --lib-space-4 (16px/side) is the canonical "small breathing room"
 * tier already used for compact contexts elsewhere in this codebase;
 * the band now hugs its own real tallest row instead of a padding
 * value sized for a simpler, single-line-only real reference.
 */
.lib-trust-strip {
  padding-block: var(--lib-space-4);
  background: var(--lib-surface-section);
  color: var(--lib-text-primary);
  border-block: 1px solid var(--lib-border-default);
}

/* Hero-attached placement: a full-bleed glass band pinned to the bottom
   edge of whatever section it's composed inside (real evidence:
   Michelle's Nails Service real owner request, "no como otra seccion
   sino parte de hero" -- Hero System Step 2). Still the same band
   markup/logic as standalone -- only the surface treatment changes.
   Deliberately NOT neutral-deep like the standalone surface above --
   real, documented owner correction (generation-hhds.css, 2026-08-12):
   "quiero que el color de marca real se lea... esta definido para esos
   tipos de contenido" -- a real, intentional brand-tinted glass for
   this specific placement, kept as-is. Only human-review correction
   here: padding brought down to match the same compact real evidence
   (HHDS's own --space-8) the standalone surface now uses. */
/* Correction pass 3 (2026-08-25): the docblock above already called this
   "full-bleed" but the rule never actually broke out of its container --
   a real latent gap, found while converging Hero's own legacy duplicate
   (which DID have this breakout) onto this canonical class. Same 100vw
   breakout technique as .hhds-hero__background; section-level
   overflow:hidden to contain it is the composing Hero's own
   responsibility (see sections/hero-split/hero-split.css's
   :has(> .hhds-container > .lib-trust-strip--hero-attached) rule). */
.lib-trust-strip--hero-attached {
  position: relative;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  padding-block: var(--lib-space-4);
  /* Brand-owned surface (2026-10-14): the default stays the owner-approved
     brand-tinted glass; a brand whose band is solid sets
     --lib-trust-strip-hero-bg (Joe's Roofing: its solid red gradient). */
  background: var(--lib-trust-strip-hero-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid color-mix(in srgb, var(--lib-border-brand) 55%, transparent);
  color: var(--lib-hero-attached-foreground);
}

/*
 * Governance correction pass 8 (2026-08-26), Hero Canvas authority final
 * fix -- the pass-7 override this comment used to document (an explicit
 * `color: var(--lib-color-inverse)` here, plus a
 * `.hhds-hero--foreground-dark ~ ...` exception layered on top) is
 * RETIRED, not merely relaxed. It assumed the Hero's media/scrim was a
 * fixed, always-dark backdrop -- exactly the "media-backed Hero sits
 * outside Canvas authority" exception this pass's governance directive
 * banned outright. HERO-01's own scrim (`.hhds-hero__background::after`,
 * `--lib-gradient-hero-media-scrim`, core/tokens.css) is now itself
 * Canvas-responsive (light wash under Canvas: Light, dark wash under
 * Canvas: Dark, via the same `--lib-color-surface` token Canvas already
 * controls) -- so `--lib-color-ink` (the token semantically paired with
 * `--lib-color-surface` for exactly this reason) is now correct here
 * unconditionally, in both Canvas modes, with no override at all.
 * `.lib-trust-strip--hero-attached` no longer declares its own `color`,
 * so it inherits the same Canvas-paired `--lib-color-ink` the standalone
 * band (above) already uses -- one rule, one token, correct in every
 * Canvas mode, hero-attached or not.
 */

/* Real owner-approved density (2026-08-12, ported here during Hero
   Authority convergence): rating-stars' own default sizing
   (1rem/1.5rem, core/tokens.css) doesn't fit this compact glass band's
   caption-sized value/label text -- scoped to hero-attached only, since
   TRU-01's standalone presentation has real room the default size
   already suits (unchanged, not part of this pass -- see the Phase 4
   report for why this isn't ported band-wide). */
/* Icon color on the hero band is brand-owned too: a brand whose band is its
   own brand color (Joe's Roofing, solid red) sets it to the band
   foreground so icons never disappear into the background. */
.lib-trust-strip--hero-attached .lib-authority-item__icon {
  color: var(--lib-trust-strip-hero-icon);
}

.lib-trust-strip--hero-attached .lib-rating-stars {
  --lib-size-rating-star: 0.7rem;
  --lib-size-rating-star-lg: 0.85rem;
  gap: var(--lib-space-fine-1);
}

.lib-trust-strip__container {
  width: var(--lib-container-wide);
  margin-inline: auto;
  padding-inline: var(--lib-space-4);
}

.lib-trust-strip--hero-attached .lib-trust-strip__container {
  width: 100%;
  padding-inline: var(--lib-space-5);
}

/* Static row -- default presentation whenever there's room for one
   (desktop/tablet). Real evidence (Hero System Step 2, live-measured):
   six real English trust labels at a legible size need more horizontal
   room than a 48rem/768px viewport reliably has without wrapping
   awkwardly or shrinking below legibility -- see the ticker fallback
   below, which takes over below that measured threshold instead of
   forcing a cramped static row. */
.lib-trust-strip__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--lib-space-6) var(--lib-space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lib-trust-strip__item {
  position: relative;
  padding-inline: var(--lib-space-2);
}

.lib-trust-strip__item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: calc(var(--lib-space-4) * -1);
  top: 50%;
  width: 2px;
  height: 1.75rem;
  background: currentColor;
  opacity: 0.3;
  transform: translateY(-50%);
}

@media (min-width: 48rem) {
  .lib-trust-strip__container {
    padding-inline: var(--lib-space-8);
  }

  .lib-trust-strip__list {
    gap: var(--lib-space-8) calc(var(--lib-space-10) + var(--lib-space-2));
  }
}

/*
 * Motion / ticker fallback -- below the measured static-row threshold
 * (mobile through small-laptop). Converges PAT-001 Marquee's real,
 * already-correct precedent (patterns/marquee) with the Hero Authority
 * Band's real duplicate-pass technique: two identical <ul> passes,
 * shifted by -50% of their combined width for a seamless loop, second
 * pass aria-hidden (pure visual redundancy, never a second
 * announcement). Unlike the pre-Phase-4 Hero-only version, the pause
 * control here is a REAL, always-present, keyboard/touch-operable
 * button -- hover/focus-within pause is kept too (defense in depth) but
 * is never the ONLY way to stop the motion, which was the real WCAG
 * 2.2.2 gap this convergence fixes (a touch-only mobile user, exactly
 * the audience this breakpoint targets, has no hover and nothing
 * focusable inside the old aria-hidden-everything wrapper).
 */
@media (max-width: 47.9375rem) {
  .lib-trust-strip__list {
    display: none;
  }

  /* Correction pass 2 (2026-08-25): the control used to sit
     position:absolute, overlaid on the ticker behind a fade scrim --
     real content still visually passed under it while scrolling
     (collision by timing/coincidence, not by construction). Rebuilt as
     a real two-column flex row instead: the ticker viewport and the
     control are siblings, each with their own space, so the ticker's
     own overflow:hidden boundary ends before the control's column
     begins -- content cannot render underneath it, by layout, not by
     luck. This also removes the scrim entirely (nothing to fade
     anymore) and the extra reserved end-padding it required. */
  .lib-trust-strip__container {
    display: flex;
    align-items: center;
    gap: var(--lib-space-3);
  }

  .lib-trust-strip__motion {
    /* Plain overflow:hidden, no edge-fade mask -- matches PAT-001
       Marquee's own real, already-approved precedent (patterns/marquee
       has no fade either) rather than a second, less-tested technique. */
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .lib-trust-strip__track {
    display: flex;
    width: max-content;
    /* Correction pass 3 (2026-08-25): 24s was measured too slow by human
       review. Duration is now DERIVED at runtime (trust-strip.js
       applyTickerDuration(): real pass width / the canonical 90px/s
       mobile track velocity, shared with logo-carousel.js) so content of
       any real length keeps comparable perceived speed -- 24s was an
       arbitrary fixed number, not tied to this fixture's actual content
       width. The 16.322s fallback below is that same formula applied to
       this shipped fixture's own real content (1469px / 90px/s) --
       used only if JS never runs (no-JS keeps animating, per this
       component's own no-JS-still-animates contract; only the pause
       control needs JS). */
    /* linear -> var(--lib-motion-ease-linear), Phase 6B.1A (2026-08-27):
       the exact canonical token motion-system-v1.md Section 7 defines
       for this exact case ("Continuous translation only"), zero
       rendered-behavior change. The 16.322s fallback already satisfies
       the governed continuous-cycle budget (12000-30000ms) -- untouched. */
    animation: lib-trust-strip-ticker var(--lib-trust-strip-ticker-duration, 16.322s) var(--lib-motion-ease-linear) infinite;
  }

  .lib-trust-strip[data-lib-authority-paused="true"] .lib-trust-strip__track {
    animation-play-state: paused;
  }

  .lib-trust-strip__pass {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .lib-trust-strip__pass .lib-trust-strip__item {
    padding-inline: var(--lib-space-5);
    white-space: nowrap;
  }

  .lib-trust-strip__control {
    display: none;
  }

  /* A real flex sibling of .lib-trust-strip__motion (see the container
     rule above) -- its own reserved column, never an overlay, so it
     cannot cover moving content by construction. The accessible name
     stays the real "Pause scrolling trust signals" (set on the button
     element itself); the visible label is hidden here since a 44px
     circular icon control communicates its purpose visually, same
     pattern as a video player's own play/pause control.
     Governance correction pass 8 (2026-08-26): pass 7's own hero-attached
     override tier here assumed a permanently dark backdrop, keyed to the
     now-retired foreground-dark class -- replaced below by one tier
     keyed to --lib-hero-attached-foreground instead (a real regression
     this pass found: HERO-03's attached control needs inverse, matching
     its permanently-dark data-surface="DARK" composition, not the plain
     ink this base rule alone would give it). */
  .lib-trust-strip--has-motion .lib-trust-strip__control {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--lib-text-primary) 32%, transparent);
    border-radius: 50%;
    color: var(--lib-text-primary);
    background: color-mix(in srgb, var(--lib-text-primary) 14%, transparent);
    cursor: pointer;
  }

  .lib-trust-strip__control[aria-pressed="true"] {
    background: color-mix(in srgb, var(--lib-text-primary) 24%, transparent);
  }

  /* Hero-attached: one override tier, not pass 7's three -- reuses the
     same smart, inheriting --lib-hero-attached-foreground token
     .lib-trust-strip--hero-attached's own color already resolves (ink
     for a SURFACE/PANEL-composed Hero, inverse for a DARK-composed one
     -- see core/tokens.css). Correct in every Hero context automatically,
     with no foreground-class branching left to maintain. */
  .lib-trust-strip--hero-attached.lib-trust-strip--has-motion .lib-trust-strip__control {
    border-color: color-mix(in srgb, var(--lib-hero-attached-foreground) 32%, transparent);
    color: var(--lib-hero-attached-foreground);
    background: color-mix(in srgb, var(--lib-hero-attached-foreground) 14%, transparent);
  }

  .lib-trust-strip--hero-attached .lib-trust-strip__control[aria-pressed="true"] {
    background: color-mix(in srgb, var(--lib-hero-attached-foreground) 24%, transparent);
  }

  .lib-trust-strip__control [data-lib-authority-control-label] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  /* Pause icon (two bars) by default; the toggle flips to a play
     triangle when already paused, so the icon always shows what
     activating the control will do next -- not its current state. */
  .lib-trust-strip__control::before,
  .lib-trust-strip__control::after {
    content: "";
  }

  .lib-trust-strip__control[aria-pressed="false"]::before,
  .lib-trust-strip__control[aria-pressed="false"]::after {
    width: 0.25rem;
    height: 0.9rem;
    background: currentColor;
    border-radius: 1px;
  }

  .lib-trust-strip__control[aria-pressed="false"]::before {
    margin-inline-end: 0.3rem;
  }

  .lib-trust-strip__control[aria-pressed="true"] {
    padding-inline-start: 0.2rem;
  }

  .lib-trust-strip__control[aria-pressed="true"]::before {
    border-style: solid;
    border-width: 0.5rem 0 0.5rem 0.75rem;
    border-color: transparent transparent transparent currentColor;
  }

  .lib-trust-strip__control[aria-pressed="true"]::after {
    display: none;
  }
}

@media (min-width: 48rem) {
  .lib-trust-strip__motion,
  .lib-trust-strip__control {
    display: none;
  }
}

/* Ticker on every width (opt-in, 2026-10-09): `--ticker-always` applies the
   mobile ticker rules (same pause control, reduced-motion stop and runtime
   duration) at desktop widths too, for bands that should keep moving right
   to left everywhere. Generated from the mobile block above, selectors
   scoped to the modifier so the default static desktop row is unchanged. */
@media (min-width: 48rem) {
  .lib-trust-strip--ticker-always .lib-trust-strip__list {
    display: none;
  }

  .lib-trust-strip--ticker-always .lib-trust-strip__container {
    display: flex;
    align-items: center;
    gap: var(--lib-space-3);
  }

  .lib-trust-strip--ticker-always .lib-trust-strip__motion {
    /* the default desktop rule hides the ticker; this variant shows it */
    display: block;
    
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .lib-trust-strip--ticker-always .lib-trust-strip__track {
    display: flex;
    width: max-content;
    
    
    animation: lib-trust-strip-ticker var(--lib-trust-strip-ticker-duration, 16.322s) var(--lib-motion-ease-linear) infinite;
  }

  .lib-trust-strip--ticker-always[data-lib-authority-paused="true"] .lib-trust-strip__track {
    animation-play-state: paused;
  }

  .lib-trust-strip--ticker-always .lib-trust-strip__pass {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .lib-trust-strip--ticker-always .lib-trust-strip__pass .lib-trust-strip__item {
    padding-inline: var(--lib-space-5);
    white-space: nowrap;
  }

  .lib-trust-strip--ticker-always .lib-trust-strip__control {
    display: none;
  }

  .lib-trust-strip--ticker-always.lib-trust-strip--has-motion .lib-trust-strip__control {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--lib-text-primary) 32%, transparent);
    border-radius: 50%;
    color: var(--lib-text-primary);
    background: color-mix(in srgb, var(--lib-text-primary) 14%, transparent);
    cursor: pointer;
  }

  .lib-trust-strip--ticker-always .lib-trust-strip__control[aria-pressed="true"] {
    background: color-mix(in srgb, var(--lib-text-primary) 24%, transparent);
  }

  .lib-trust-strip--ticker-always.lib-trust-strip--hero-attached.lib-trust-strip--has-motion .lib-trust-strip__control {
    border-color: color-mix(in srgb, var(--lib-hero-attached-foreground) 32%, transparent);
    color: var(--lib-hero-attached-foreground);
    background: color-mix(in srgb, var(--lib-hero-attached-foreground) 14%, transparent);
  }

  .lib-trust-strip--ticker-always.lib-trust-strip--hero-attached .lib-trust-strip__control[aria-pressed="true"] {
    background: color-mix(in srgb, var(--lib-hero-attached-foreground) 24%, transparent);
  }

  .lib-trust-strip--ticker-always .lib-trust-strip__control [data-lib-authority-control-label] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .lib-trust-strip--ticker-always .lib-trust-strip__control::before,
  .lib-trust-strip--ticker-always .lib-trust-strip__control::after {
    content: "";
  }

  .lib-trust-strip--ticker-always .lib-trust-strip__control[aria-pressed="false"]::before,
  .lib-trust-strip--ticker-always .lib-trust-strip__control[aria-pressed="false"]::after {
    width: 0.25rem;
    height: 0.9rem;
    background: currentColor;
    border-radius: 1px;
  }

  .lib-trust-strip--ticker-always .lib-trust-strip__control[aria-pressed="false"]::before {
    margin-inline-end: 0.3rem;
  }

  .lib-trust-strip--ticker-always .lib-trust-strip__control[aria-pressed="true"] {
    padding-inline-start: 0.2rem;
  }

  .lib-trust-strip--ticker-always .lib-trust-strip__control[aria-pressed="true"]::before {
    border-style: solid;
    border-width: 0.5rem 0 0.5rem 0.75rem;
    border-color: transparent transparent transparent currentColor;
  }

  .lib-trust-strip--ticker-always .lib-trust-strip__control[aria-pressed="true"]::after {
    display: none;
  }
}

@keyframes lib-trust-strip-ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lib-trust-strip__track,
  .lib-trust-strip--ticker-always .lib-trust-strip__track {
    animation: none;
  }
}