/**
 * Single listing detail — single-at_biz_dir.php (Figma frame 206-4332).
 *
 * Layout: breadcrumb → title + actions → gallery (1+4 with overflow) →
 * 2-col body (main: services table, about, map, reviews | aside: purple
 * contact card with hours/socials/category) → CTA banner.
 *
 * BEM block: `bb-single-listing`. Listing card styles (used elsewhere)
 * live in chrome.css. Star glyph styles also live there.
 */

/* Side gutters come from the global ADR-0019 .bb-container — no override needed. */

/* ---------- Breadcrumb ---------- */

.bb-single-listing__breadcrumb {
    margin: 0 0 var(--ds-sp-3) 0;
}

.bb-single-listing__breadcrumb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-sp-2);
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-s);
    color: var(--ds-color-text-muted);
}

.bb-single-listing__breadcrumb-list a {
    color: var(--ds-color-text-muted);
    text-decoration: none;
}

.bb-single-listing__breadcrumb-list a:hover {
    color: var(--ds-color-primary-600);
}

.bb-single-listing__breadcrumb-list li + li::before {
    content: "/";
    margin-right: var(--ds-sp-2);
    color: var(--ds-color-text-soft);
}

.bb-single-listing__breadcrumb-list [aria-current="page"] {
    color: var(--ds-color-text);
    font-weight: 500;
}

/* ---------- Title + actions ---------- */

.bb-single-listing__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-sp-5);
    margin-bottom: var(--ds-sp-6);
}

.bb-single-listing__title {
    margin: 0;
    font-family: var(--ds-font-display);
    font-size: var(--ds-fs-h2);
    font-weight: 400;
    line-height: var(--ds-lh-tight);
    color: var(--ds-color-text);
    flex: 1 1 auto;
    min-width: 0;
}

.bb-single-listing__title-accent {
    font-style: italic;
    color: var(--ds-color-primary-600);
}

.bb-single-listing__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-sp-2);
    flex-shrink: 0;
}

.bb-single-listing__action {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-sp-2);
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-pill);
    color: var(--ds-color-text-muted);
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-s);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.bb-single-listing__action:hover {
    border-color: var(--ds-color-primary-600);
    color: var(--ds-color-primary-600);
}

/* ---------- Top row: gallery slideshow + contact card ---------- */

/* Gallery (left, fills space) + contact card (right, fixed 360px), sharing a
   top edge. Mirrors the __body grid so gutters match. The main content below
   is a single column (see __body). */
.bb-single-listing__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--ds-sp-8);
    /* Stretch both columns to equal height so the gallery matches the card. */
    align-items: stretch;
    margin-bottom: var(--ds-sp-10);
}

/* ---------- Gallery slideshow ---------- */

.bb-single-listing__gallery {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Fill the stretched grid row so the image is as tall as the contact card. */
    min-height: 0;
}

.bb-single-listing__gallery-viewport {
    position: relative;
    overflow: hidden;
    border-radius: var(--ds-radius-lg);
    background: var(--ds-color-gray-100);
    /* Grow to fill the gallery height (which equals the card height). The
       image is cropped to fit via object-fit:cover. A min-height keeps it
       usable if the card is unusually short. */
    flex: 1 1 auto;
    min-height: 320px;
}

.bb-single-listing__gallery-track {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
}

.bb-single-listing__gallery-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.bb-single-listing__gallery-slide.is-active {
    opacity: 1;
    visibility: visible;
}

.bb-single-listing__gallery-image {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.bb-single-listing__gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Prev / next arrows */
.bb-single-listing__gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-color-primary-500, #2ec4b6);
    color: var(--ds-color-gray-0);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: background 0.15s ease, transform 0.15s ease;
}

.bb-single-listing__gallery-arrow:hover {
    background: var(--ds-color-primary-600);
}

.bb-single-listing__gallery-arrow--prev { left: var(--ds-sp-4); }
.bb-single-listing__gallery-arrow--next { right: var(--ds-sp-4); }

/* Radio-button dots — one per image, overlaid near the bottom of the image */
.bb-single-listing__gallery-dots {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: var(--ds-sp-2);
    padding: 6px 10px;
    border-radius: var(--ds-radius-pill);
    /* Subtle scrim so dots stay visible over light or dark photos. */
    background: rgba(0, 0, 0, 0.35);
}

.bb-single-listing__gallery-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: background 0.15s ease;
}

.bb-single-listing__gallery-dot:hover {
    background: rgba(255, 255, 255, 0.8);
}

.bb-single-listing__gallery-dot.is-active {
    background: var(--ds-color-gray-0);
}

/* ---------- Lightbox ---------- */

.bb-single-listing__lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ds-sp-8);
}

.bb-single-listing__lightbox[hidden] { display: none; }

.bb-single-listing__lightbox-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
}

.bb-single-listing__lightbox-figure {
    position: relative;
    z-index: 1;
    margin: 0;
    max-width: 100%;
    max-height: 100%;
}

.bb-single-listing__lightbox-image {
    display: block;
    max-width: 100%;
    max-height: 85vh;
    border-radius: var(--ds-radius-lg);
    object-fit: contain;
}

.bb-single-listing__lightbox-close,
.bb-single-listing__lightbox-arrow {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--ds-radius-pill);
    background: rgba(255, 255, 255, 0.15);
    color: var(--ds-color-gray-0);
    cursor: pointer;
    transition: background 0.15s ease;
}

.bb-single-listing__lightbox-close:hover,
.bb-single-listing__lightbox-arrow:hover {
    background: rgba(255, 255, 255, 0.3);
}

.bb-single-listing__lightbox-close {
    top: var(--ds-sp-6);
    right: var(--ds-sp-6);
    width: 44px;
    height: 44px;
}

.bb-single-listing__lightbox-arrow {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
}

.bb-single-listing__lightbox-arrow--prev { left: var(--ds-sp-6); }
.bb-single-listing__lightbox-arrow--next { right: var(--ds-sp-6); }

/* ---------- Body (single column below the top row) ---------- */

.bb-single-listing__body {
    display: block;
}

.bb-single-listing__main {
    display: flex;
    flex-direction: column;
    gap: var(--ds-sp-10);
}

.bb-single-listing__section {
    /* Sections separated by gap on the parent column. */
}

.bb-single-listing__section-title {
    margin: 0 0 var(--ds-sp-3) 0;
    font-family: var(--ds-font-display);
    font-size: var(--ds-fs-h4);
    font-weight: 400;
    line-height: var(--ds-lh-tight);
    color: var(--ds-color-text);
}

.bb-single-listing__section-hint {
    margin: 0 0 var(--ds-sp-4) 0;
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-s);
    color: var(--ds-color-text-muted);
}

/* Services table */

.bb-single-listing__services-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-md);
    overflow: hidden;
    font-family: var(--ds-font-body);
}

.bb-single-listing__services-table thead th {
    padding: 10px 14px;
    background: var(--ds-color-gray-100);
    text-align: left;
    font-size: var(--ds-fs-body-s);
    font-weight: 600;
    color: var(--ds-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--ds-color-border);
}

.bb-single-listing__services-table tbody th {
    padding: 14px;
    text-align: left;
    font-weight: 500;
    color: var(--ds-color-text);
    font-size: var(--ds-fs-body);
}

.bb-single-listing__services-table tbody td {
    padding: 14px;
    color: var(--ds-color-text);
    font-size: var(--ds-fs-body);
    border-top: 1px solid var(--ds-color-border-soft);
}

.bb-single-listing__services-table tbody tr:first-child td,
.bb-single-listing__services-table tbody tr:first-child th {
    border-top: none;
}

/* About prose */

.bb-single-listing__prose {
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-m);
    line-height: var(--ds-lh-prose);
    color: var(--ds-color-text);
}

.bb-single-listing__prose p {
    margin: 0 0 var(--ds-sp-4) 0;
}

.bb-single-listing__prose p:last-child {
    margin-bottom: 0;
}

/* Map — lives inside the About section card per Figma frame 206:4459.
   Spaced from the description prose above with sp-5 top margin. */

.bb-single-listing__map {
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
    border: 1px solid var(--ds-color-border-soft);
}

.bb-single-listing__prose + .bb-single-listing__map,
.bb-single-listing__section-title + .bb-single-listing__map {
    margin-top: var(--ds-sp-5);
}

.bb-single-listing__map iframe {
    display: block;
    width: 100%;
}

/* Reviews */

.bb-single-listing__reviews-summary {
    display: grid;
    grid-template-columns: minmax(160px, auto) minmax(0, 1fr);
    gap: var(--ds-sp-8);
    align-items: center;
    margin-bottom: var(--ds-sp-5);
    padding-bottom: var(--ds-sp-5);
    border-bottom: 1px solid var(--ds-color-border-soft);
}

.bb-single-listing__reviews-score {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-sp-2);
    font-family: var(--ds-font-body);
}

.bb-single-listing__reviews-score strong {
    font-family: var(--ds-font-display);
    font-size: var(--ds-fs-h3);
    line-height: 1;
    color: var(--ds-color-text);
}

.bb-single-listing__reviews-stars {
    color: var(--ds-color-rating);
    font-size: 18px;
    letter-spacing: 2px;
}

.bb-single-listing__reviews-count {
    color: var(--ds-color-text-muted);
    font-size: var(--ds-fs-body);
}

/* Per-criteria breakdown (Cleanliness, Communication, etc.) — placeholder
   rendering until Directorist multi-criteria-review extension is installed.
   Values are the overall rating shown six times. */

.bb-single-listing__criteria {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ds-sp-2);
}

.bb-single-listing__criterion {
    display: grid;
    grid-template-columns: minmax(96px, auto) minmax(60px, 1fr) auto;
    align-items: center;
    gap: var(--ds-sp-3);
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body);
    color: var(--ds-color-text);
}

.bb-single-listing__criterion-label {
    color: var(--ds-color-text-muted);
}

.bb-single-listing__criterion-bar {
    position: relative;
    height: 6px;
    background: var(--ds-color-gray-100);
    border-radius: 99px;
    overflow: hidden;
}

.bb-single-listing__criterion-bar-fill {
    display: block;
    height: 100%;
    background: var(--ds-color-text);
    border-radius: inherit;
}

.bb-single-listing__criterion-score {
    font-variant-numeric: tabular-nums;
    color: var(--ds-color-text);
}

.bb-single-listing__reviews-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ds-sp-5);
}

.bb-single-listing__review {
    padding: var(--ds-sp-5);
    background: var(--ds-color-surface);
    border: 1px solid var(--ds-color-border-soft);
    border-radius: var(--ds-radius-md);
}

.bb-single-listing__review-head {
    display: flex;
    align-items: center;
    gap: var(--ds-sp-3);
    margin-bottom: var(--ds-sp-3);
}

.bb-single-listing__review-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ds-color-primary-50);
    color: var(--ds-color-primary-600);
    font-family: var(--ds-font-body);
    font-weight: 700;
    flex-shrink: 0;
}

.bb-single-listing__review-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.bb-single-listing__review-author {
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body);
    color: var(--ds-color-text);
}

.bb-single-listing__review-date {
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-s);
    color: var(--ds-color-text-muted);
}

.bb-single-listing__review-rating {
    color: var(--ds-color-rating);
    font-size: 14px;
    letter-spacing: 1px;
}

.bb-single-listing__review-body {
    margin: 0;
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body);
    line-height: var(--ds-lh-body);
    color: var(--ds-color-text-muted);
}

.bb-single-listing__reviews-more {
    margin: var(--ds-sp-4) 0 0 0;
}

.bb-single-listing__reviews-more a {
    color: var(--ds-color-primary-600);
    font-weight: 500;
}

/* ---------- Sidebar (purple contact card) ---------- */

.bb-single-listing__sidebar {
    position: sticky;
    top: var(--ds-sp-5);
}

.bb-single-listing__card {
    padding: var(--ds-sp-6);
    background: var(--ds-color-primary-600);
    color: var(--ds-color-gray-0);
    border-radius: var(--ds-radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--ds-sp-4);
}

.bb-single-listing__card-title {
    margin: 0;
    font-family: var(--ds-font-display);
    font-size: var(--ds-fs-h4);
    font-weight: 400;
    line-height: var(--ds-lh-tight);
    color: var(--ds-color-gray-0);
}

.bb-single-listing__card-rating {
    display: flex;
    align-items: center;
    gap: var(--ds-sp-2);
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body);
}

.bb-single-listing__card-rating strong {
    font-weight: 700;
}

.bb-single-listing__card-stars {
    color: var(--ds-color-accent-yellow);
    font-size: 14px;
    letter-spacing: 1px;
}

.bb-single-listing__card-reviews {
    color: rgba(255, 255, 255, 0.7);
}

.bb-single-listing__card-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ds-sp-2);
}

.bb-single-listing__card-action {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ds-sp-1);
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--ds-radius-md);
    color: var(--ds-color-gray-0);
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-s);
    text-decoration: none;
    transition: background 0.15s ease;
}

.bb-single-listing__card-action:hover {
    background: rgba(255, 255, 255, 0.2);
}

.bb-single-listing__card-address {
    margin: 0;
    display: flex;
    gap: var(--ds-sp-2);
    align-items: flex-start;
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body);
    line-height: var(--ds-lh-body);
    color: rgba(255, 255, 255, 0.85);
}

.bb-single-listing__card-address svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.bb-single-listing__card-hours {
    list-style: none;
    margin: 0;
    padding: var(--ds-sp-3) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    gap: var(--ds-sp-1);
}

.bb-single-listing__card-hours-row {
    display: flex;
    justify-content: space-between;
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body);
    line-height: 1.5;
    color: var(--ds-color-gray-0);
}

/* Feedback 2026-06-22: "Closed" is white, like every other opening-times value
   (was dimmed to 50% opacity). */
.bb-single-listing__card-hours-row.is-closed .bb-single-listing__card-times {
    color: var(--ds-color-gray-0);
}

.bb-single-listing__card-day {
    color: rgba(255, 255, 255, 0.85);
}

.bb-single-listing__card-times {
    color: var(--ds-color-gray-0);
}

.bb-single-listing__card-socials {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-sp-2);
}

.bb-single-listing__card-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--ds-color-gray-0);
    text-decoration: none;
    font-size: 16px;
}

.bb-single-listing__card-social:hover {
    background: rgba(255, 255, 255, 0.2);
}

.bb-single-listing__card-category {
    margin: 0;
    padding-top: var(--ds-sp-3);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-s);
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ---------- Responsive ----------
   Tablet + mobile (per Figma 387-7795 and 461-14925) reorder the layout
   significantly: the purple contact sidebar moves ABOVE the main column
   (right after the gallery), and the gallery collapses to lead-only.
   Criteria breakdown stays 2-col on tablet, stacks 1-col on mobile.
*/

@media (max-width: 960px) {
    .bb-single-listing__title {
        font-size: var(--ds-fs-h3);
    }

    .bb-single-listing__head {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Top row collapses: gallery full-width on top, contact card beneath it.
       No card to match height against now — the image uses a fixed aspect
       ratio instead of stretching. */
    .bb-single-listing__top {
        grid-template-columns: 1fr;
        gap: var(--ds-sp-6);
        align-items: start;
    }

    .bb-single-listing__gallery-viewport {
        flex: none;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .bb-single-listing__sidebar {
        position: static;
    }

    /* Criteria 2-col still works on tablet — keep. */

    /* Reviews summary stacks on tablet so the score gets its own row. */
    .bb-single-listing__reviews-summary {
        grid-template-columns: 1fr;
        gap: var(--ds-sp-4);
    }
}

@media (max-width: 640px) {
    .bb-single-listing__title {
        font-size: var(--ds-fs-h4);
    }

    .bb-single-listing__actions {
        gap: var(--ds-sp-1);
    }

    .bb-single-listing__action {
        padding: 6px 10px;
        font-size: var(--ds-fs-body-s);
    }

    /* Criteria → single column on mobile. */
    .bb-single-listing__criteria {
        grid-template-columns: 1fr;
        row-gap: var(--ds-sp-3);
    }

    .bb-single-listing__criterion {
        grid-template-columns: minmax(80px, auto) minmax(40px, 1fr) auto;
        gap: var(--ds-sp-2);
    }

    /* Services table → stacked cards. */
    .bb-single-listing__services-table thead {
        display: none;
    }

    .bb-single-listing__services-table,
    .bb-single-listing__services-table tbody,
    .bb-single-listing__services-table tr,
    .bb-single-listing__services-table th,
    .bb-single-listing__services-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .bb-single-listing__services-table tbody tr {
        border-bottom: 1px solid var(--ds-color-border-soft);
        padding: var(--ds-sp-3) var(--ds-sp-2);
    }

    .bb-single-listing__services-table tbody tr:last-child {
        border-bottom: none;
    }

    .bb-single-listing__services-table tbody th {
        padding: 0 0 var(--ds-sp-1) 0;
        font-size: var(--ds-fs-body-m);
        font-weight: 600;
    }

    .bb-single-listing__services-table tbody td {
        padding: 2px 0;
        font-size: var(--ds-fs-body-s);
        color: var(--ds-color-text-muted);
        border: none;
    }

    /* Action pills inside the purple card go 1-col on very narrow viewports
       only if the labels wrap; for typical 375px they stay 3-col. */
    .bb-single-listing__card {
        padding: var(--ds-sp-5);
    }

    /* Map height shorter on mobile so the page doesn't feel too long. */
    .bb-single-listing__map iframe {
        height: 240px;
    }
}

/* =========================================================================
   Action buttons interactive states + Report modal + Toast
   ========================================================================= */

/* Save button — `is-active` reflects the listing being in user's favourites.
   The SVG heart inside switches from stroked to filled. */
.bb-single-listing__action.is-active {
    color: var(--ds-color-primary-600);
    border-color: var(--ds-color-primary-600);
    background: var(--ds-color-primary-50);
}
.bb-single-listing__action.is-active svg path {
    fill: currentColor;
}

/* Report modal — overlay + centred dialog card. Uses the chrome.css btn
   primitives for Cancel + Send buttons, so spacing follows the same scale. */
.bb-report-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ds-sp-4);
}
.bb-report-modal[hidden] {
    display: none;
}
.bb-report-modal__scrim {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0.45);
}
.bb-report-modal__card {
    position: relative;
    z-index: 1;
    background: var(--ds-color-gray-0);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-lift);
    padding: var(--ds-sp-8);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
}
.bb-report-modal__close {
    position: absolute;
    inset-block-start: var(--ds-sp-3);
    inset-inline-end: var(--ds-sp-3);
    inline-size: 36px;
    block-size: 36px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--ds-color-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bb-report-modal__close:hover {
    background: var(--ds-color-gray-100);
}
.bb-report-modal__title {
    font-family: var(--ds-font-display);
    font-size: var(--ds-fs-h5);
    line-height: var(--ds-lh-tight);
    margin: 0 0 var(--ds-sp-2);
    color: var(--ds-color-text);
}
.bb-report-modal__lede {
    margin: 0 0 var(--ds-sp-5);
    color: var(--ds-color-text-muted);
    font-size: var(--ds-fs-body);
    line-height: var(--ds-lh-body);
}
.bb-report-modal__label {
    display: block;
    font-size: var(--ds-fs-body);
    color: var(--ds-color-text);
    margin-block-end: var(--ds-sp-2);
}
.bb-report-modal__textarea {
    width: 100%;
    min-height: 120px;
    padding: var(--ds-sp-3) var(--ds-sp-4);
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-md);
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body);
    line-height: var(--ds-lh-body);
    color: var(--ds-color-text);
    background: var(--ds-color-gray-0);
    resize: vertical;
    box-sizing: border-box;
}
.bb-report-modal__textarea:focus {
    outline: none;
    border-color: var(--ds-color-primary-600);
    box-shadow: 0 0 0 3px var(--ds-color-primary-50);
}
.bb-report-modal__select {
    width: 100%;
    padding: var(--ds-sp-3) var(--ds-sp-4);
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-md);
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body);
    line-height: var(--ds-lh-body);
    color: var(--ds-color-text);
    background: var(--ds-color-gray-0);
    box-sizing: border-box;
}
.bb-report-modal__select:focus {
    outline: none;
    border-color: var(--ds-color-primary-600);
    box-shadow: 0 0 0 3px var(--ds-color-primary-50);
}
.bb-report-modal__select + .bb-report-modal__label {
    margin-block-start: var(--ds-sp-4);
}
.bb-report-modal__feedback {
    margin-block-start: var(--ds-sp-3);
    color: #b91c1c;
    font-size: var(--ds-fs-body-s);
}
.bb-report-modal__actions {
    margin-block-start: var(--ds-sp-5);
    display: flex;
    justify-content: flex-end;
    gap: var(--ds-sp-3);
    flex-wrap: wrap;
}

body.bb-modal-open {
    overflow: hidden;
}

/* Toast — slides up from bottom; auto-dismisses after ~3.2s. */
.bb-toast {
    position: fixed;
    inset-block-end: var(--ds-sp-5);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: 140;
    padding: var(--ds-sp-3) var(--ds-sp-5);
    background: var(--ds-color-text);
    color: var(--ds-color-gray-0);
    border-radius: var(--ds-radius-pill);
    box-shadow: var(--ds-shadow-lift);
    font-size: var(--ds-fs-body);
    max-width: calc(100vw - 2 * var(--ds-sp-5));
    text-align: center;
    animation: bb-toast-in 180ms ease-out;
}
.bb-toast[hidden] {
    display: none;
}
.bb-toast[data-variant="error"] {
    background: #b91c1c;
}
@keyframes bb-toast-in {
    from { transform: translate(-50%, 12px); opacity: 0; }
    to   { transform: translate(-50%, 0);    opacity: 1; }
}