/**
 * bml-reviews — styles cloned from the Senja bundle CSS for the three
 * reference widgets (see docs/superpowers/plans/2026-07-20-bml-reviews-plugin.md
 * Task 2 for source ids). Selectors are rescoped from `.senja-embed X`
 * to `.bml-reviews X`; inner `sj-*` class names are kept as-is so the
 * extracted rules transfer verbatim. CSS custom property values below
 * are the resolved output of Senja's `ms()`/pill-style helper functions
 * for our three widgets' `design` configs (not re-invented).
 *
 * font-family is intentionally NOT set anywhere here — it inherits
 * from the host page, matching Senja's shadow-DOM `:host { font-family:
 * inherit }`.
 */

.bml-reviews.bml-reviews,
.bml-reviews.bml-reviews *,
.bml-reviews.bml-reviews *::before,
.bml-reviews.bml-reviews *::after {
    box-sizing: border-box;
}

.bml-reviews.bml-reviews img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* The widget must fill its parent even when the host theme wraps the
   shortcode in a flex/shrink-to-fit container (seen on payments'
   checkout pages): without an explicit width the wall collapses to
   .sj-card-wall's 280px min-width and the container query renders a
   single column. */
.bml-reviews.bml-reviews {
    width: 100%;
    flex: 1 1 auto;
}

/* ------------------------------------------------------------------ */
/* Wall (source: 5fb981fc-714a-475d-bb79-2752015ffdd3)                */
/* ------------------------------------------------------------------ */

.bml-reviews--wall.bml-reviews--wall {
    /* resolved via Senja's ms(design.card) for this widget's colors:
       border:false, shadow:none, borderRadius:xl, gap:lg */
    --clr-background: #ffffff;
    --clr-primary: #6701e6;
    --clr-text: #46371f;
    --clr-highlight: #fff6b2;
    --clr-rating: #f9cd5d;
    --border-width: 0px;
    --border-radius: 1rem;
    --box-shadow: none;
    --padding: 16px;
    --gap: 18px; /* gap:"lg" -> 18px (R() in bundle) */
}

.bml-reviews.bml-reviews .sj-card-wall {
    width: 100%;
    overflow: hidden;
    min-width: 280px;
    container-type: inline-size;
}

.bml-reviews.bml-reviews .sj-masonry {
    width: 100%;
    columns: 3;
    column-gap: var(--gap);
}

/* Container-width breakpoints copied from the bundle's Mt() column
   function (548 / 800 are the exact thresholds where Senja's masonry
   drops from 3 -> 2 -> 1 columns for a maxColumns:3 widget). */
@container (max-width: 800px) {
    .bml-reviews.bml-reviews .sj-masonry {
        columns: 2;
    }
}

@container (max-width: 548px) {
    .bml-reviews.bml-reviews .sj-masonry {
        columns: 1;
    }
}

/* Fallback for browsers without container query support. */
@supports not (container-type: inline-size) {
    @media (max-width: 800px) {
        .bml-reviews.bml-reviews .sj-masonry {
            columns: 2;
        }
    }

    @media (max-width: 548px) {
        .bml-reviews.bml-reviews .sj-masonry {
            columns: 1;
        }
    }
}

.bml-reviews.bml-reviews .sj-card {
    background-color: var(--clr-background);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    break-inside: avoid;
    margin-bottom: var(--gap);
    display: inline-block;
    /* inline-block's default baseline alignment reserves space below
       the box for descenders, adding ~3px on top of margin-bottom
       (measured effective gap 21px vs live's 18px for the same
       declared 18px margin). vertical-align:top removes that reserved
       space so the rendered gap matches margin-bottom exactly. */
    vertical-align: top;
    width: 100%;
}

.bml-reviews.bml-reviews .sj-text-card {
    padding: var(--padding);
    border-width: var(--border-width);
    box-shadow: var(--box-shadow);
    border-color: var(--clr-border, transparent);
    border-radius: var(--border-radius);
    border-style: solid;
}

.bml-reviews.bml-reviews .sj-card-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
}

.bml-reviews.bml-reviews .sj-endorser-view-container {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 1rem;
}

.bml-reviews.bml-reviews .sj-avatar-container {
    position: relative;
    flex-shrink: 0;
    border-radius: 9999px;
    background-color: rgba(128, 128, 128, 0.14);
    width: 42px;
    height: 42px;
}

.bml-reviews.bml-reviews .sj-avatar-container img {
    border-radius: 9999px;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.bml-reviews.bml-reviews .sj-endorser-name {
    color: var(--clr-text);
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
}

.bml-reviews.bml-reviews .sj-spacer,
.bml-reviews.bml-reviews .sj-card-spacer {
    flex-grow: 1;
}

.bml-reviews.bml-reviews .sj-star-row {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    display: flex;
}

.bml-reviews.bml-reviews .sj-star {
    margin-right: 2px;
    flex: none;
    overflow: visible;
}

.bml-reviews.bml-reviews .sj-content {
    font-size: 16px;
    color: var(--clr-text);
    line-height: 24px;
    letter-spacing: -0.025em;
    text-align: left;
}

.bml-reviews.bml-reviews .sj-content a {
    color: var(--clr-primary);
}

.bml-reviews.bml-reviews .sj-content-text {
    /* overflow/display/-webkit-line-clamp are set inline (matching
       Senja's own approach of toggling the clamp via inline style,
       not a CSS class) so the JS toggle only has to flip one value. */
    white-space: normal;
}

/* Senja's own <mark> highlight rule, copied verbatim from the wall
   bundle's `.sj-card mark{...}` CSS (senja-data/bundles/
   5fb981fc-714a-475d-bb79-2752015ffdd3.js): background-color and color
   are its own --clr-highlight/--clr-text vars, not an invented yellow. */
.bml-reviews.bml-reviews .sj-card mark.sj-highlight {
    background-color: var(--clr-highlight);
    color: var(--clr-text);
    border-radius: 0.25rem;
    padding-left: 0.125rem;
    padding-right: 0.125rem;
}

.bml-reviews.bml-reviews .sj-read-more {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    margin-top: 0.25rem;
    font: inherit;
    font-size: 16px;
    font-weight: 400;
    color: var(--clr-text);
    cursor: pointer;
}

.bml-reviews.bml-reviews .sj-read-more[hidden] {
    display: none;
}

.bml-reviews.bml-reviews .bml-reviews-load-more-wrap {
    display: flex;
    justify-content: center;
    /* padding-top intentionally 0: the wall's trailing card already
       contributes margin-bottom:var(--gap) to the .sj-masonry
       container's rendered height (multicol is a BFC, so that
       margin is contained, not collapsed away). Adding padding-top
       here too stacked 18px+18px=36px vs live's 18px (live has no
       card margin at all -- Shuffle.js positions cards via transform
       -- so only this padding would apply there). Zeroing this
       leaves exactly the card's own margin-bottom as the gap. */
    padding-top: 0;
}

/* Purple pill "Show more reviews" button — copied from this widget's
   own config.customCss override (`.senja-embed :is(.px-2)`), which is
   what actually produces the purple pill seen on the live page. */
.bml-reviews.bml-reviews .bml-reviews-load-more {
    appearance: none;
    cursor: pointer;
    font: inherit;
    /* must come after `font: inherit` -- the shorthand resets
       font-size (and line-height), so declaring font-size first was
       silently clobbered (fixture was rendering the inherited page
       font-size, not 14px). line-height is set explicitly below to
       match live's computed 36px (parity report: live renders this
       button at 44px total height = 36px line-height + 8px padding;
       border removed below so no extra height/width from border). */
    font-size: 22px;
    line-height: 36px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 15px;
    padding-right: 15px;
    background: #b150d1;
    color: #fff;
    border: none;
    border-radius: 20px;
}

.bml-reviews.bml-reviews .bml-reviews-load-more[hidden] {
    display: none;
}

/* ------------------------------------------------------------------ */
/* Marquee (source: 382576b5-e299-437a-9b40-78c5b32b3b13)             */
/* ------------------------------------------------------------------ */

.bml-reviews--marquee.bml-reviews--marquee {
    /* matches live per-widget Senja value, verified by parity
       measurement. Other vars still resolved via the bundle's
       row-style helper for size:"lg" and this widget's own colors
       (border defaults to 1px when unset). */
    --clr-text: #8c7b3b;
    --clr-background: #ffffff;
    --clr-border: #e4d8ff;
    --clr-highlight: #fff6b2;
    --border-width: 1px;
    --text-size: 18px;
    --border-radius: 16px;
    --padding-x: 24px;
    --gap: 12px;
    --avatar-size: 40px;
}

.bml-reviews.bml-reviews .sj-marquee-rows {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    overflow: hidden;
}

.bml-reviews.bml-reviews .sj-marquee {
    overflow: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.bml-reviews.bml-reviews .sj-marquee::-webkit-scrollbar {
    display: none;
}

.bml-reviews.bml-reviews .sj-marquee .sj-marquee-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    gap: var(--gap);
    padding-right: var(--gap);
    animation-name: bml-reviews-marquee;
    /* Live derives duration from content width: duration_s =
       groupWidthPx / 30 (config speed:30). assets/bml-reviews.js sets
       --bml-marquee-duration on this row's .sj-marquee ancestor after
       measuring the rendered group width (see initMarqueeDuration()).
       85s is only the no-JS/pre-measurement fallback (Senja's measured
       range is 79.7s-92.6s; 85s sits in the middle of it). */
    animation-duration: var(--bml-marquee-duration, 85s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: var(--bml-marquee-direction, normal);
}

.bml-reviews.bml-reviews .sj-marquee:hover .sj-marquee-track {
    animation-play-state: paused;
}

@keyframes bml-reviews-marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.bml-reviews.bml-reviews .sj-marquee-item {
    flex: none;
}

.bml-reviews.bml-reviews .sj-marquee-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--clr-background);
    color: var(--clr-text);
    border: var(--border-width) solid var(--clr-border);
    border-radius: var(--border-radius);
    border-bottom-left-radius: 0;
    padding: calc(var(--padding-x) / 2) var(--padding-x);
    font-size: var(--text-size);
    white-space: nowrap;
}

.bml-reviews--marquee.bml-reviews--marquee .sj-avatar-container {
    width: var(--avatar-size);
    height: var(--avatar-size);
}

.bml-reviews.bml-reviews .sj-marquee-text {
    /* No truncation, no ellipsis, no max-width: pills are sized to
       their content per the measured live model (unique text lengths
       25-165 chars observed live, none clipped). */
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Badge (source: e26867e7-e5ec-4e94-8ab5-d76cab21b70b)               */
/* ------------------------------------------------------------------ */

.bml-reviews--badge.bml-reviews--badge {
    --clr-text: #374151;
    /* matches live per-widget Senja value, verified by parity
       measurement. Unused by any rule below (star fill is set inline
       by bml_reviews_badge_rating_stars() in render.php) but kept for
       documentation/consistency with the wall block. */
    --clr-rating: #fc9038;
}

.bml-reviews.bml-reviews .sj-simple-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
}

.bml-reviews.bml-reviews .sj-simple-badge-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
}

.bml-reviews.bml-reviews .sj-simple-badge-rating-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.bml-reviews.bml-reviews .sj-simple-badge-rating {
    display: flex;
    flex: none;
}

.bml-reviews.bml-reviews .sj-simple-badge-avg-rating {
    font-size: 16px;
    line-height: 1;
    color: var(--clr-text);
    font-weight: 400;
}

.bml-reviews.bml-reviews .sj-simple-badge-text {
    font-size: 14px;
    color: var(--clr-text);
}

/* ------------------------------------------------------------------ */
/* Bubble list (source: 5d21ca3a-d485-4bf5-a3fa-649ec2df92e6)          */
/* Values copied from the bundle's .bubble/.review-bubble rules plus   */
/* the widget's customCss (.bubble padding 15px) and design config     */
/* (colors, maxHeight 800). --clr-primary-dk is Senja's da(primary,.06)*/
/* — HSL lightness −6% of #6701E6 → #5901c8.                           */
/* ------------------------------------------------------------------ */

.bml-reviews--bubble.bml-reviews--bubble {
    --clr-background: #ffffff;
    --clr-primary: #6701e6;
    --clr-primary-dk: #5901c8;
    --clr-text: #374151;
    --clr-rating: #fbbf24;
    width: 100%;
    /* Unlike the wall/marquee (which inherit the host font), the live
       bubble widget's shadow DOM computes to the system-ui stack, NOT
       the page's Figtree — measured on /lp/bless-my-home-icp1/. */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.bml-reviews.bml-reviews .sj-bubble-masked-overflow {
    height: 800px; /* config.design.maxHeight */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(180deg, transparent 0%, #000 4%, #000 96%, transparent);
}

/* Senja's vertical marquee-container/.marquee pair: hidden overflow,
   two stacked copies each animating translateY(0 -> -100%). Duration
   is set per container by assets/bml-reviews.js from
   scrollHeight / 50px-per-second (config.design.scrollSpeed). */
.bml-reviews.bml-reviews .sj-bubble-marquee-container {
    display: flex;
    height: 100%;
    overflow-y: hidden;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    position: relative;
}

.bml-reviews.bml-reviews .sj-bubble-marquee {
    flex: 0 0 auto;
    min-height: 100%;
    width: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: bml-reviews-bubble-scroll var(--bml-bubble-duration, 40s) linear 0s infinite;
}

@keyframes bml-reviews-bubble-scroll {
    0% { transform: translateY(0%); }
    100% { transform: translateY(-100%); }
}

/* .bubble in the bundle: flex column, gap 1rem; padding 4px overridden
   to 15px by the widget's customCss. font-family inherits (matches
   Senja's :host { font-family: inherit }). */
.bml-reviews.bml-reviews .sj-bubble {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1rem;
    padding: 15px;
}

.bml-reviews.bml-reviews .sj-bubble-content-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    gap: 1rem;
}

.bml-reviews.bml-reviews .sj-bubble-review {
    width: 100%;
}

.bml-reviews.bml-reviews .sj-bubble-relative {
    position: relative;
}

/* Striped offset "shadow" plate behind the bubble (bundle:
   .bubble-background absolute bottom-0 left-4 right-0 top-0
   translate-x-2 translate-y-2 → left 1rem, shifted 0.5rem/0.5rem). */
.bml-reviews.bml-reviews .sj-bubble-background {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1rem;
    right: 0;
    transform: translate(0.5rem, 0.5rem);
    border: 3px solid black;
    border-radius: 24px;
    background: repeating-linear-gradient(
        45deg,
        var(--clr-primary),
        var(--clr-primary) 16px,
        var(--clr-primary-dk) 8px,
        var(--clr-primary-dk) 20px
    );
}

.bml-reviews.bml-reviews .sj-review-bubble {
    flex: 1;
    text-align: left;
    position: relative;
    border-radius: 24px;
    background-color: var(--clr-background);
    color: var(--clr-text);
    padding: 16px;
    border: 3px solid black;
}

/* Speech tail (bundle .review-bubble:before, verbatim). */
.bml-reviews.bml-reviews .sj-review-bubble::before {
    content: '';
    position: absolute;
    top: 30px;
    left: -20px;
    height: 20px;
    width: 20px;
    background-color: var(--clr-background);
    box-sizing: border-box;
    border-bottom-right-radius: 5px;
    transform: rotate(135deg) translate(-60%);
    border-bottom: inherit;
    border-right: inherit;
    box-shadow: inherit;
}

.bml-reviews.bml-reviews .sj-bubble-inner {
    position: relative;
}

.bml-reviews.bml-reviews .sj-bubble-rating {
    margin-bottom: 8px;
}

.bml-reviews.bml-reviews .sj-bubble-text {
    font-size: 16px;
    line-height: 1.5rem;
    font-weight: 500;
    white-space: pre-wrap;
    text-align: left;
}

.bml-reviews.bml-reviews .sj-bubble-text mark {
    background-color: var(--clr-highlight, #fff6b2);
    color: var(--clr-text);
    border-radius: 4px;
    padding: 0 2px;
}

.bml-reviews.bml-reviews .sj-bubble-attribution {
    display: block;
    opacity: 0.7;
    font-size: 0.875rem;
    margin-top: 8px;
    /* live-measured: the rendered cite IS italic (browser default),
       14px / weight 400 */
    font-style: italic;
    font-weight: 400;
}