/* ---------------------------------------------------------------------------
 * HVN mobile overrides
 * ---------------------------------------------------------------------------
 * WHY THIS FILE EXISTS, AND WHY IT IS NOT SCSS
 *
 * Two parts of the build pipeline make the obvious places unusable:
 *
 *  1. frontend-source/extract-component-css.php regenerates EVERY original
 *     *.component.scss from the frozen Vebto bundle before each build, so any
 *     responsive rule added to e.g. landing.component.scss is erased on the
 *     next deploy.
 *
 *  2. The deploy's "Sync built bundle" step copies only *.js / *.js.map /
 *     index.html out of the Angular build, deliberately preserving the
 *     original public/client/styles.*.css. The styles bundle compiled from
 *     src/scss/styles.scss is therefore never shipped, so edits there are
 *     equally inert.
 *
 * This file is plain CSS living in public/client/. The extractor ignores it
 * (not a component .scss), the sync step's delete does not match it (not .js),
 * and rsync ships it like any other file. It is linked from app.blade.php
 * AFTER the frozen styles bundle.
 *
 * ON !important: Angular injects component styles into <head> at runtime,
 * i.e. after this <link>, and its emulated-encapsulation selectors carry an
 * extra attribute each (.content[_ngcontent-x] = 0,2,0). A plain global rule
 * loses on both order and specificity, so the overrides below are marked.
 * Every one is confined to a max-width media query, so desktop is untouched.
 * ------------------------------------------------------------------------- */


/* === 1. Landing hero =======================================================
 * landing.component.scss ships `header .content { padding: 180px 80px 280px }`
 * and `h1 { font-size: 6rem }` with no breakpoint of its own. At 375px that
 * left the headline 215px to render 335px of text inside an
 * `overflow: hidden` header, so "Independent" and "Intentionally" were cut
 * off mid-word, under ~460px of vertical dead space.
 * Root font-size is 10px, so 1rem = 10px.
 * ------------------------------------------------------------------------ */
@media only screen and (max-width: 768px) {
    landing header .content {
        padding: 110px 32px 120px !important;
    }

    landing header h1 {
        font-size: clamp(2.8rem, 8.2vw, 4.4rem) !important;
        line-height: 1.15 !important;
        margin-bottom: 12px !important;
    }

    landing header p {
        font-size: clamp(1.6rem, 4.4vw, 2.1rem) !important;
        line-height: 1.45 !important;
        max-width: none !important;
    }

    landing header .cta-button {
        font-size: 1.6rem !important;
        line-height: 48px !important;
        min-width: 180px !important;
        margin-top: 28px !important;
    }
}

@media only screen and (max-width: 420px) {
    landing header .content {
        padding: 90px 20px 96px !important;
    }
}

/* Belt-and-braces: a long unbroken word must never be clipped again, whatever
 * the font size ends up being. overflow-wrap only breaks a word that genuinely
 * cannot fit, so normal copy is untouched. Deliberately NOT `hyphens: auto`,
 * which hyphenated "inde-pendent" in the subtitle at 375px. */
@media only screen and (max-width: 768px) {
    landing header h1,
    landing header p {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }
}


/* === 2. Footer menu columns ================================================
 * footer.component.scss has a 768px breakpoint, but it only reflows
 * `.about-col`. The three custom-menu.col link lists keep their desktop
 * `justify-content: space-between` with no gap, so at 375px they rendered
 * ~147px / 63px / 104px wide and "Now Streaming on HVN" ran into "Crime".
 * ------------------------------------------------------------------------ */
@media only screen and (max-width: 768px) {
    footer .footer-content .container {
        gap: 24px 20px !important;
        align-items: flex-start !important;
    }

    footer custom-menu.col {
        flex: 1 1 calc(50% - 10px) !important;
        max-width: none !important;
        min-width: 140px !important;
        margin-bottom: 0 !important;
    }

    /* Looser hit area for the footer links, which were 20px tall. */
    footer .col .nav-item {
        padding: 6px 0 !important;
        margin-bottom: 4px !important;
    }
}

@media only screen and (max-width: 420px) {
    footer custom-menu.col {
        flex: 1 1 100% !important;
    }
}


/* === 3. Stop iOS zooming the page on every field focus =====================
 * Mobile Safari zooms into any form control whose font-size is below 16px.
 * The auth inputs computed to 15px. This was previously masked by
 * `user-scalable=no` in the viewport meta; that has been removed (it blocks
 * pinch-zoom and fails WCAG 1.4.4), so the real fix is needed here.
 * 16px is a 1px bump and does not visibly change Material field metrics.
 * ------------------------------------------------------------------------ */
@media only screen and (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input:not([type]),
    textarea,
    select {
        font-size: 16px !important;
    }
}


/* === 4. Touch targets ======================================================
 * Material 1's own metrics predate the ~44px guidance: text buttons are 36px
 * tall and icon buttons 40px. The footer links were 20px before section 2
 * lifted them to 32px. All mobile-only, so desktop density is untouched.
 *
 * line-height is set alongside min-height on text buttons because Material
 * centres the label with line-height, not flexbox — raising only the height
 * would leave the label sitting against the top edge.
 * ------------------------------------------------------------------------ */
@media only screen and (max-width: 768px) {
    .mat-button,
    .mat-flat-button,
    .mat-raised-button,
    .mat-stroked-button {
        min-height: 44px !important;
        line-height: 44px !important;
    }

    .mat-icon-button {
        width: 44px !important;
        height: 44px !important;
        line-height: 44px !important;
    }

    .mat-menu-panel .nav-item,
    .mat-menu-panel .mat-menu-item {
        min-height: 44px !important;
        line-height: 44px !important;
    }

    /* The navbar's hamburger menu auto-sized to its longest label and came out
     * 90px wide. Widening the projected custom-menu widens the panel with it,
     * without touching the app's other mat-menus (sort, user, admin), which
     * have no custom-menu inside. */
    .mat-menu-panel custom-menu {
        display: block !important;
        min-width: 170px !important;
    }

    /* Footer links: 32px after section 2, still short of the guidance. */
    footer .col .nav-item {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Bare selects and text inputs in admin forms sat at 39px. */
    sidenav main select,
    sidenav main input[type="text"],
    sidenav main input[type="number"],
    sidenav main input[type="email"],
    sidenav main input[type="url"] {
        min-height: 44px !important;
    }

    /* The cookie notice's OK button was 50x28. */
    .cdk-overlay-pane .mat-flat-button,
    .cdk-overlay-pane .mat-button,
    .cdk-overlay-pane .mat-raised-button {
        min-height: 44px !important;
        line-height: 44px !important;
        padding: 0 20px !important;
    }

    /* The name links in datatable cards (a.video-name, a.title-name) are the
     * way you open a row on a phone, and they were 20px tall. line-height
     * rather than flex, so the cells' text-overflow: ellipsis keeps working on
     * long names. Costs roughly 5% more page length on a long list. */
    .responsive-table td a {
        min-height: 44px !important;
        line-height: 44px !important;
    }
}


/* === 5. Title page: let the genre list wrap ================================
 * genre-widget rendered 455px of genres into 340px, so the last genre was
 * clipped. Allowing the row to wrap keeps every genre reachable.
 * ------------------------------------------------------------------------ */
@media only screen and (max-width: 768px) {
    genre-widget {
        display: block !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }
}


/* === 6. Long unbreakable URLs in admin =====================================
 * The sitemap link on /admin/settings is a single 359px unbreakable token with
 * `overflow-wrap: normal`, which pushed the whole admin page to 400px and gave
 * it a horizontal scroll. Lives here rather than in the component, because the
 * admin settings SCSS is regenerated from the frozen bundle on every build.
 * break-word (not anywhere) so intrinsic sizing of flex/grid items is unchanged.
 * ------------------------------------------------------------------------ */
@media only screen and (max-width: 768px) {
    sidenav main a,
    .sitemap-description,
    .sitemap-description a {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }
}

/* ---------------------------------------------------------------------------
 * VIDEO KIND — trailer vs full film
 * ---------------------------------------------------------------------------
 * NOT a mobile rule, despite the filename. It lives here because it is the
 * only stylesheet in this project that survives a build: `.hvn-kind` has to
 * reach title-video-carousel, title-video-table, media-item-header and the
 * creator dashboard at once, and those are original components whose .scss is
 * regenerated from the frozen bundle before every build. Angular's default
 * ViewEncapsulation would stop a class defined in one of them reaching the
 * others in any case, so a global sheet solves both problems together.
 *
 * Two variants, one idea: FILLED means "this is the whole thing", OUTLINE
 * means "this is a sample of it". A viewer learns that once and it then holds
 * on every screen.
 *
 * Root font-size is 10px here, so 1.1rem = 11px.
 * ------------------------------------------------------------------------ */

.hvn-kind {
    display: inline-block !important;
    padding: 0.3rem 0.7rem !important;
    border-radius: 0.3rem !important;
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    border: 1px solid currentColor !important;
    background: transparent !important;
    opacity: 0.85 !important;
    vertical-align: middle !important;
}

.hvn-kind--full {
    background: var(--be-accent-default, #F65F54) !important;
    color: #fff !important;
    border-color: transparent !important;
    opacity: 1 !important;
}

/* Caption under the hero play button. The button itself stays the styled,
 * animated FAB the theme already provides; this only tells you what it does. */
.hvn-play-caption {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.8rem !important;
    margin-top: 1.2rem !important;
    text-align: center !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

.hvn-play-note {
    font-size: 1.3rem !important;
    opacity: 0.85 !important;
}

.hvn-play-alt {
    font-size: 1.3rem !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    opacity: 0.9 !important;
    background: none !important;
    border: 0 !important;
    color: inherit !important;
    padding: 0 !important;
}

.hvn-play-alt:hover {
    opacity: 1 !important;
}

/* The table gets a real column; keep it from being squeezed to nothing. */
.kind-column {
    white-space: nowrap !important;
    width: 1% !important;
}

/* Creator dashboard: the kind sits beside the review-status pill. */
.hvn-kind + .status-chip,
.status-chip + .hvn-kind {
    margin-left: 0.6rem !important;
}

@media (max-width: 600px) {
    .hvn-play-caption {
        margin-top: 0.8rem !important;
    }
    .hvn-play-note,
    .hvn-play-alt {
        font-size: 1.2rem !important;
    }
}

/* =====================================================================
   CREATOR ONBOARDING
   Getting-started checklist + guided tour on /creator/dashboard.

   Lives here rather than in the component's SCSS because
   extract-component-css.php regenerates every *.component.scss from the
   frozen bundle before each build, and the deploy syncs only js/map/html --
   so this file is the only stylesheet that survives. Loaded after the
   bundle, hence !important throughout. Root font-size is 10px: 1rem = 10px.
   ===================================================================== */

.dash-start {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 1rem !important;
    padding: 1.8rem 2rem !important;
    margin-bottom: 2.4rem !important;
}

.dash-start-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 1.2rem !important;
}

.dash-start-head h2 {
    font-size: 1.7rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.dash-start-sub {
    font-size: 1.3rem !important;
    opacity: 0.7 !important;
    margin: 0.4rem 0 0 !important;
    max-width: 52rem !important;
    line-height: 1.5 !important;
}

.dash-start-dismiss {
    background: none !important;
    border: 0 !important;
    color: inherit !important;
    opacity: 0.5 !important;
    cursor: pointer !important;
    padding: 0.4rem !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
}

.dash-start-dismiss:hover { opacity: 1 !important; }

.dash-start-dismiss .mat-icon,
.dash-start-dismiss svg {
    width: 1.8rem !important;
    height: 1.8rem !important;
}

/* Progress. A bar, not a percentage label: the count is already in prose
   above it, and two numbers saying the same thing reads as clutter. */
.dash-start-bar {
    height: 0.4rem !important;
    border-radius: 0.4rem !important;
    background: rgba(255, 255, 255, 0.12) !important;
    overflow: hidden !important;
    margin: 1.4rem 0 1.6rem !important;
}

.dash-start-bar > span {
    display: block !important;
    height: 100% !important;
    background: var(--be-accent-default, #e91e63) !important;
    border-radius: 0.4rem !important;
    transition: width 0.3s ease !important;
}

.dash-start-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dash-start-list > li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 1.2rem !important;
    padding: 1rem 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.dash-start-list > li:last-child { border-bottom: 0 !important; }

/* Done items stay legible rather than vanishing -- the list doubles as a
   record of what has already been set up. */
.dash-start-list > li.is-done .dash-start-label {
    text-decoration: line-through !important;
    opacity: 0.55 !important;
}

.dash-start-list > li.is-done .dash-start-hint { display: none !important; }

/* No 'radio-button-unchecked' in the sprite, so the empty state is a ring. */
.dash-start-tick {
    flex: 0 0 auto !important;
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 0.2rem !important;
}

.dash-start-tick.is-done {
    background: var(--be-accent-default, #e91e63) !important;
    border-color: var(--be-accent-default, #e91e63) !important;
}

.dash-start-tick .mat-icon,
.dash-start-tick svg {
    width: 1.3rem !important;
    height: 1.3rem !important;
    color: #fff !important;
    fill: #fff !important;
}

.dash-start-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.dash-start-label {
    font-size: 1.4rem !important;
    font-weight: 500 !important;
}

.dash-start-hint {
    font-size: 1.2rem !important;
    opacity: 0.6 !important;
    line-height: 1.45 !important;
}

.dash-start-go {
    flex: 0 0 auto !important;
    background: none !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 0.5rem !important;
    color: inherit !important;
    font-size: 1.2rem !important;
    font-weight: 500 !important;
    padding: 0.5rem 1.1rem !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    margin-top: 0.1rem !important;
}

.dash-start-go:hover {
    border-color: var(--be-accent-default, #e91e63) !important;
    color: var(--be-accent-default, #e91e63) !important;
}

.dash-start-foot {
    display: flex !important;
    align-items: center !important;
    gap: 1.6rem !important;
    margin-top: 1.6rem !important;
    flex-wrap: wrap !important;
}

.dash-start-tour {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    background: none !important;
    border: 0 !important;
    color: var(--be-accent-default, #e91e63) !important;
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    padding: 0 !important;
}

.dash-start-tour .mat-icon,
.dash-start-tour svg {
    width: 1.7rem !important;
    height: 1.7rem !important;
}

.dash-start-foot a {
    font-size: 1.3rem !important;
    opacity: 0.75 !important;
    text-decoration: underline !important;
}

.dash-start-foot a:hover { opacity: 1 !important; }

/* Re-entry row, shown once the checklist is complete or dismissed. */
.dash-retour {
    display: flex !important;
    align-items: center !important;
    gap: 1.6rem !important;
    margin-bottom: 1.8rem !important;
    flex-wrap: wrap !important;
}

.dash-retour a {
    font-size: 1.3rem !important;
    opacity: 0.7 !important;
    text-decoration: underline !important;
}

/* ---- Empty state turned invitation ---- */

.dash-blank {
    text-align: center !important;
    padding: 4rem 2rem !important;
    border: 1px dashed rgba(255, 255, 255, 0.16) !important;
    border-radius: 1rem !important;
    margin: 1.2rem 0 2rem !important;
}

.dash-blank-icon.mat-icon,
.dash-blank-icon svg {
    width: 4.4rem !important;
    height: 4.4rem !important;
    opacity: 0.35 !important;
    margin-bottom: 0.8rem !important;
}

.dash-blank h3 {
    font-size: 1.8rem !important;
    font-weight: 600 !important;
    margin: 0 0 0.6rem !important;
}

.dash-blank p {
    font-size: 1.35rem !important;
    opacity: 0.7 !important;
    line-height: 1.6 !important;
    max-width: 44rem !important;
    margin: 0 auto 2rem !important;
}

.dash-blank-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.2rem !important;
    flex-wrap: wrap !important;
}

/* ---- Guided tour ---- */

.hvn-tour {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1200 !important;
    pointer-events: none !important;
}

/* The veil takes the clicks. Without it a click meant for "Next" could land
   on the Upload or Delete button being spotlighted underneath. */
.hvn-tour-veil {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.62) !important;
    pointer-events: auto !important;
}

/* Spotlight: a transparent box with an enormous shadow, so the ring reads as
   a hole cut in the veil without needing an SVG mask. */
.hvn-tour-spot {
    position: absolute !important;
    border-radius: 0.8rem !important;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.62),
                0 0 0 2px var(--be-accent-default, #e91e63) !important;
    background: transparent !important;
    pointer-events: none !important;
    transition: top 0.25s ease, left 0.25s ease,
                width 0.25s ease, height 0.25s ease !important;
}

.hvn-tour-card {
    position: absolute !important;
    /* cardLeft() clamps against a 340px card, so padding and border have to
       count inside that width or the callout overhangs the right edge. */
    box-sizing: border-box !important;
    width: 34rem !important;
    max-width: calc(100vw - 3.2rem) !important;
    background: #1c1c22 !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 1rem !important;
    padding: 1.8rem !important;
    box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, 0.55) !important;
    pointer-events: auto !important;
}

.hvn-tour-count {
    font-size: 1.1rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    opacity: 0.55 !important;
    margin-bottom: 0.6rem !important;
}

.hvn-tour-card h3 {
    font-size: 1.7rem !important;
    font-weight: 600 !important;
    margin: 0 0 0.8rem !important;
}

.hvn-tour-card p {
    font-size: 1.35rem !important;
    line-height: 1.6 !important;
    opacity: 0.82 !important;
    margin: 0 0 1.8rem !important;
}

.hvn-tour-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1.2rem !important;
}

.hvn-tour-nav {
    display: flex !important;
    align-items: center !important;
    gap: 0.8rem !important;
}

.hvn-tour-skip,
.hvn-tour-back {
    background: none !important;
    border: 0 !important;
    color: #fff !important;
    opacity: 0.6 !important;
    font-size: 1.3rem !important;
    cursor: pointer !important;
    padding: 0.6rem 0.4rem !important;
}

.hvn-tour-skip:hover,
.hvn-tour-back:hover { opacity: 1 !important; }

.hvn-tour-next {
    background: var(--be-accent-default, #e91e63) !important;
    border: 0 !important;
    border-radius: 0.5rem !important;
    color: #fff !important;
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    padding: 0.8rem 1.8rem !important;
    cursor: pointer !important;
}

@media (max-width: 600px) {
    .dash-start { padding: 1.4rem 1.4rem !important; }

    /* Stacked, because the CTA and the hint text fight for the same row at
       phone width and the button ends up two characters wide. */
    .dash-start-list > li {
        flex-wrap: wrap !important;
    }
    .dash-start-go {
        margin-left: 3.2rem !important;
    }
    .dash-start-head h2 { font-size: 1.6rem !important; }
    .dash-blank { padding: 3rem 1.4rem !important; }
    .hvn-tour-card { width: calc(100vw - 3.2rem) !important; }
}

/* Creators directory: the way in.
   This page is where a viewer decides they could do it too, and it had no
   call to action at all. */
.hvn-join {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 2rem !important;
    flex-wrap: wrap !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 1rem !important;
    padding: 2rem 2.4rem !important;
    margin: 0 0 2.4rem !important;
}

.hvn-join-text { min-width: 0 !important; flex: 1 1 28rem !important; }

.hvn-join-text h2 {
    font-size: 1.9rem !important;
    font-weight: 600 !important;
    margin: 0 0 0.5rem !important;
}

.hvn-join-text p {
    font-size: 1.35rem !important;
    opacity: 0.72 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    max-width: 56rem !important;
}

.hvn-join-actions {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    flex: 0 0 auto !important;
    flex-wrap: wrap !important;
}

.hvn-join--slim { padding: 1.6rem 2.4rem !important; }
.hvn-join--slim .hvn-join-text h2 { font-size: 1.6rem !important; }

@media (max-width: 600px) {
    .hvn-join {
        padding: 1.6rem !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    /* flex-basis follows the main axis, so the 28rem basis that sets a
       comfortable minimum column width on desktop became a 280px minimum
       HEIGHT once this stacks -- opening a tall empty gap above the buttons. */
    .hvn-join-text {
        flex: 0 0 auto !important;
    }
    .hvn-join-actions { width: 100% !important; }
    .hvn-join-actions > a { flex: 1 1 auto !important; text-align: center !important; }
}

/* =====================================================================
   YOUR ACTIVITY  (/account/activity)
   Every member's posts, comments and reviews in one place. Managing any
   of them already worked -- but only on the page each one lived on.
   ===================================================================== */

.act-page { padding-bottom: 6rem !important; }

.act-loading {
    padding: 4rem 0 !important;
    opacity: 0.6 !important;
    font-size: 1.4rem !important;
}

.act-tabs {
    display: flex !important;
    gap: 0.4rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    margin: 0 0 2rem !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.act-tabs > button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.7rem !important;
    background: none !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    color: inherit !important;
    opacity: 0.62 !important;
    font-size: 1.35rem !important;
    font-weight: 500 !important;
    padding: 1.1rem 1.4rem !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    margin-bottom: -1px !important;
}

.act-tabs > button:hover { opacity: 0.9 !important; }

.act-tabs > button.is-active {
    opacity: 1 !important;
    border-bottom-color: var(--be-accent-default, #e91e63) !important;
}

.act-count {
    display: inline-block !important;
    min-width: 2rem !important;
    padding: 0.1rem 0.6rem !important;
    border-radius: 1rem !important;
    background: rgba(255, 255, 255, 0.1) !important;
    font-size: 1.1rem !important;
    text-align: center !important;
}

.act-tabs > button.is-active .act-count {
    background: var(--be-accent-default, #e91e63) !important;
    color: #fff !important;
}

.act-none {
    padding: 3rem 0 !important;
    opacity: 0.6 !important;
    font-size: 1.35rem !important;
}

.act-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 1.6rem !important;
    padding: 1.6rem 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.act-row:last-child { border-bottom: 0 !important; }

.act-row-main { flex: 1 1 auto !important; min-width: 0 !important; }

.act-row-title {
    display: block !important;
    font-size: 1.55rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.4rem !important;
}

/* "on <the thing it was written about>" -- a comment out of its context is
   just a sentence; this is what makes the row navigable. */
.act-row-on {
    font-size: 1.25rem !important;
    opacity: 0.65 !important;
    margin-bottom: 0.5rem !important;
}

.act-row-on a {
    font-weight: 600 !important;
    text-decoration: underline !important;
    opacity: 1 !important;
}

.act-score {
    margin-left: 0.8rem !important;
    padding: 0.1rem 0.6rem !important;
    border-radius: 0.4rem !important;
    background: rgba(255, 255, 255, 0.1) !important;
    font-size: 1.1rem !important;
}

.act-row-body {
    font-size: 1.35rem !important;
    line-height: 1.6 !important;
    opacity: 0.85 !important;
    margin: 0 0 0.6rem !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}

.act-row-meta {
    display: flex !important;
    align-items: center !important;
    gap: 1.4rem !important;
    flex-wrap: wrap !important;
    font-size: 1.2rem !important;
    opacity: 0.55 !important;
}

.act-row-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.2rem !important;
    flex: 0 0 auto !important;
}

.act-edit {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

.act-edit input,
.act-edit textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 0.6rem !important;
    color: inherit !important;
    font: inherit !important;
    font-size: 1.35rem !important;
    padding: 1rem 1.2rem !important;
    resize: vertical !important;
}

.act-edit input:focus,
.act-edit textarea:focus {
    outline: none !important;
    border-color: var(--be-accent-default, #e91e63) !important;
}

.act-edit-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.8rem !important;
}

@media (max-width: 600px) {
    .act-tabs > button { padding: 1rem !important; font-size: 1.25rem !important; }

    /* The icon buttons drop under the text rather than squeezing the body
       into a two-word column. */
    .act-row {
        flex-wrap: wrap !important;
        gap: 0.8rem !important;
    }
    .act-row-actions { margin-left: auto !important; }
}

/* Review editing on /account/activity: score sits beside the text, because a
   review is both and saving one without the other is not a thing. */
.act-score-field {
    display: flex !important;
    align-items: center !important;
    gap: 0.8rem !important;
    font-size: 1.3rem !important;
}

.act-score-field > span { opacity: 0.7 !important; }

.act-score-field input {
    width: 7rem !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 0.6rem !important;
    color: inherit !important;
    font: inherit !important;
    font-size: 1.35rem !important;
    padding: 0.8rem 1rem !important;
}

.act-score-field input:focus {
    outline: none !important;
    border-color: var(--be-accent-default, #e91e63) !important;
}

.act-score-max { opacity: 0.5 !important; }

/* =====================================================================
   LANDING PAGE
   The page used to be three stock claims over three 404ing photographs.
   These styles carry the sections that replaced them: the real catalogue,
   the real creators, and a hero that cannot render empty.
   ===================================================================== */

/* The hero's background image 404ed, so the header collapsed to a flat
   black band. This gradient sits underneath whatever image loads, which
   means the hero reads as designed even with no image at all. */
.hvn-hero .gradient-overlay,
landing header .gradient-overlay {
    background: radial-gradient(120% 90% at 50% 0%,
                    rgba(80, 60, 120, 0.42) 0%,
                    rgba(18, 14, 28, 0.86) 55%,
                    #0d0b12 100%) !important;
}

.hvn-hero-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.2rem !important;
    flex-wrap: wrap !important;
    margin-top: 2.4rem !important;
}

.hvn-hero-alt.mat-stroked-button {
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: #fff !important;
}

/* ---- Showcase sections ---- */

.hvn-showcase { margin: 6rem auto 0 !important; }

.hvn-showcase-head {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 1.6rem !important;
    margin-bottom: 2.4rem !important;
    flex-wrap: wrap !important;
}

.hvn-showcase-head h2 {
    font-size: 2.6rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.hvn-showcase-all {
    font-size: 1.35rem !important;
    text-decoration: underline !important;
    opacity: 0.75 !important;
    white-space: nowrap !important;
}

.hvn-showcase-all:hover { opacity: 1 !important; }

/* The featured film gets the full width. With a catalogue this small a
   twelve-column grid holding one poster looks like a bug. */
.hvn-feature {
    display: grid !important;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important;
    gap: 3rem !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 1.2rem !important;
    overflow: hidden !important;
}

.hvn-feature-art {
    display: block !important;
    height: 100% !important;
    min-height: 26rem !important;
}

.hvn-feature-art img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.hvn-feature-info { padding: 2.4rem 3rem 2.4rem 0 !important; }

.hvn-feature-meta {
    display: flex !important;
    align-items: center !important;
    gap: 1.2rem !important;
    flex-wrap: wrap !important;
    font-size: 1.25rem !important;
    opacity: 0.7 !important;
    margin-bottom: 1rem !important;
}

.hvn-feature-info h3 {
    font-size: 3rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    margin: 0 0 0.8rem !important;
}

.hvn-feature-by {
    font-size: 1.35rem !important;
    opacity: 0.75 !important;
    margin: 0 0 1.4rem !important;
}

.hvn-feature-by a {
    text-decoration: underline !important;
    font-weight: 600 !important;
}

.hvn-feature-desc {
    font-size: 1.4rem !important;
    line-height: 1.65 !important;
    opacity: 0.82 !important;
    margin: 0 0 2.2rem !important;
}

/* ---- Remaining films ---- */

.hvn-film-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)) !important;
    gap: 2rem !important;
    margin-top: 2.4rem !important;
}

.hvn-film-grid img {
    width: 100% !important;
    aspect-ratio: 2 / 3 !important;
    object-fit: cover !important;
    border-radius: 0.8rem !important;
    display: block !important;
    margin-bottom: 0.8rem !important;
}

.hvn-film-name { font-size: 1.4rem !important; font-weight: 600 !important; }
.hvn-film-by { font-size: 1.2rem !important; opacity: 0.6 !important; }

/* ---- Creators ---- */

.hvn-creator-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)) !important;
    gap: 2rem !important;
}

.hvn-creator-row > li > a {
    display: block !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 1rem !important;
    padding: 2rem !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

.hvn-creator-row > li > a:hover {
    border-color: rgba(255, 255, 255, 0.24) !important;
}

.hvn-creator-face {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 6rem !important;
    height: 6rem !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.12) !important;
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    margin-bottom: 1.2rem !important;
}

.hvn-creator-face img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.hvn-creator-name {
    display: block !important;
    font-size: 1.6rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.4rem !important;
}

.hvn-creator-bio {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 1.3rem !important;
    line-height: 1.55 !important;
    opacity: 0.7 !important;
}

/* ---- Written feature blocks, now without their 404ing photographs ---- */

.hvn-text-feature {
    display: block !important;
    max-width: 78rem !important;
    text-align: center !important;
}

.hvn-text-feature .info { max-width: none !important; }

.hvn-text-feature .feature-border {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ---- Creator call to action ---- */

.hvn-join-band {
    margin: 7rem auto 8rem !important;
    text-align: center !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 1.2rem !important;
    padding: 4rem 3rem !important;
}

.hvn-join-band h2 {
    font-size: 2.6rem !important;
    font-weight: 600 !important;
    margin: 0 0 1.2rem !important;
}

.hvn-join-band p {
    font-size: 1.45rem !important;
    line-height: 1.7 !important;
    opacity: 0.8 !important;
    max-width: 60rem !important;
    margin: 0 auto 2.6rem !important;
}

.hvn-join-band-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.2rem !important;
    flex-wrap: wrap !important;
}

@media (max-width: 860px) {
    /* Side by side, the poster shrinks to a sliver and the copy to a
       column two words wide. */
    .hvn-feature {
        grid-template-columns: 1fr !important;
    }
    .hvn-feature-art { min-height: 20rem !important; }
    .hvn-feature-info { padding: 2.4rem !important; }
    .hvn-feature-info h3 { font-size: 2.4rem !important; }
}

@media (max-width: 600px) {
    .hvn-showcase { margin-top: 4rem !important; }
    .hvn-showcase-head h2,
    .hvn-join-band h2 { font-size: 2.1rem !important; }
    .hvn-join-band { padding: 3rem 1.8rem !important; margin: 5rem auto 6rem !important; }
    .hvn-join-band-actions > a { flex: 1 1 100% !important; }
    .hvn-film-grid { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)) !important; }
    .hvn-hero-actions > a { flex: 1 1 auto !important; }
}

/* ---------------------------------------------------------------------
   Hero buttons: one pair, not two designs.

   "Explore the Network" is the theme's pill -- 48px tall, 30px radius,
   16px/300. The button added beside it inherited Material's stroked
   default -- 46px tall, 4px radius, 14px/500 -- so the two sat at
   different heights with different corners and different type.

   They were also 13px out of vertical line: .cta-button still carries the
   margin-top: 28px it was given as the only control under the hero copy,
   and in a centre-aligned flex row a top margin pushes its box down past
   its neighbour's. The row supplies its own spacing now.
   --------------------------------------------------------------------- */

.hvn-hero-actions .mat-button-base {
    margin: 0 !important;
    height: 4.8rem !important;
    line-height: 4.8rem !important;
    padding: 0 2.8rem !important;
    /* 20rem so both land on the same width: at 15px/500 the longer label
       plus padding measures 194px, which left the pair 4px mismatched. */
    min-width: 20rem !important;
    border-radius: 3rem !important;
    font-size: 1.5rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    box-sizing: border-box !important;
    transition: background-color 0.18s ease, border-color 0.18s ease !important;
}

/* The filled action keeps the accent, loses the Material drop shadow --
   it reads as a sticker over a photographic hero. */
.hvn-hero-actions .cta-button.mat-raised-button {
    box-shadow: none !important;
}

.hvn-hero-actions .cta-button.mat-raised-button:hover {
    box-shadow: none !important;
    filter: brightness(1.08) !important;
}

/* Secondary: same silhouette, quieter weight. A hairline over a dark
   photograph rather than Material's grey 1px rectangle. */
.hvn-hero-actions .hvn-hero-alt.mat-stroked-button {
    /* An outlined button carrying a drop shadow reads as a raised one that
       lost its fill. */
    box-shadow: none !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
    backdrop-filter: blur(2px) !important;
}

.hvn-hero-actions .hvn-hero-alt.mat-stroked-button:hover {
    border-color: #fff !important;
    background: rgba(255, 255, 255, 0.16) !important;
}

@media (max-width: 600px) {
    /* Side by side at 19rem each they overflow a 375px screen, and a
       half-width pill reads as a broken one. */
    .hvn-hero-actions {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    .hvn-hero-actions .mat-button-base {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 32rem !important;
    }
}

/* ---------------------------------------------------------------------
   Icon + label alignment inside buttons.

   Material lays a button's contents out inline and leans on the icon's
   `vertical-align: middle`, which aligns the icon's midpoint to the text
   BASELINE plus half an x-height -- not to the centre of the line box. A
   24px icon next to 14px text therefore sits a pixel or two high, which is
   what makes the "+" on "Upload new title" and "Add project" look dropped
   relative to its label.

   Centring the wrapper as a flex row makes it exact regardless of font
   metrics, and a gap gives every icon button the same spacing instead of
   Material's inconsistent per-icon margins.

   Scoped to the text buttons. `.mat-icon-button` is deliberately absent:
   it holds a single centred glyph and already lays out correctly.
   --------------------------------------------------------------------- */

.mat-button > .mat-button-wrapper,
.mat-raised-button > .mat-button-wrapper,
.mat-flat-button > .mat-button-wrapper,
.mat-stroked-button > .mat-button-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.6rem !important;
    line-height: 1 !important;
}

.mat-button > .mat-button-wrapper > .mat-icon,
.mat-raised-button > .mat-button-wrapper > .mat-icon,
.mat-flat-button > .mat-button-wrapper > .mat-icon,
.mat-stroked-button > .mat-button-wrapper > .mat-icon {
    /* The gap above owns the spacing now; Material's own margins varied
       between 5px and 8px depending on which stylesheet reached it. */
    margin: 0 !important;
    width: 1.8rem !important;
    height: 1.8rem !important;
    font-size: 1.8rem !important;
    flex: 0 0 auto !important;
}

/* ---------------------------------------------------------------------
   Genre picker on the creator upload form.

   A <select multiple> is the obvious control and the wrong one: it needs
   ctrl-click to choose more than one, shows about four of twenty-five
   options at a time, and on a phone it is a scrolling box inside a
   scrolling form. Toggle chips show the whole vocabulary at once and take
   a single tap each.
   --------------------------------------------------------------------- */

.chip-picker {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.8rem !important;
    padding: 0.4rem 0 !important;
}

.chip-picker .chip {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 2rem !important;
    color: inherit !important;
    font: inherit !important;
    font-size: 1.3rem !important;
    line-height: 1 !important;
    padding: 0.8rem 1.4rem !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.chip-picker .chip:hover {
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.chip-picker .chip.is-on {
    background: var(--be-accent-default, #e91e63) !important;
    border-color: var(--be-accent-default, #e91e63) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

/* The upload form's selects were styled only as text inputs, so the two
   that became dropdowns inherited the browser default and stood out. */
.upload-grid select,
.upload-panel select {
    width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 0.6rem !important;
    color: inherit !important;
    font: inherit !important;
    font-size: 1.35rem !important;
    padding: 1rem 1.2rem !important;
}

.upload-grid select:focus,
.upload-panel select:focus {
    outline: none !important;
    border-color: var(--be-accent-default, #e91e63) !important;
}

/* A dark <option> list is unreadable on the platforms that inherit the
   control's colours rather than the system palette. */
.upload-grid select option,
.upload-panel select option {
    background: #1c1c22 !important;
    color: #fff !important;
}

/* ---------------------------------------------------------------------
   Upload / edit form, split into sections.

   One column of thirty-odd fields is what made this read as heavier than
   the admin editor at /titles/{id}/edit, even though it does more. These
   are a view only: every section belongs to the same form and the same
   Save, so there is nothing to unlock by saving first -- which is the trap
   in the editor this replaces ("Save from Primary Facts panel in order to
   enable other menu items").
   --------------------------------------------------------------------- */

.upload-tabs {
    display: flex !important;
    gap: 0.4rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    margin: 0 0 2rem !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.upload-tabs > button {
    background: none !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    color: inherit !important;
    opacity: 0.6 !important;
    font: inherit !important;
    font-size: 1.35rem !important;
    font-weight: 500 !important;
    padding: 1.1rem 1.6rem !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    margin-bottom: -1px !important;
}

.upload-tabs > button:hover { opacity: 0.85 !important; }

.upload-tabs > button.is-active {
    opacity: 1 !important;
    border-bottom-color: var(--be-accent-default, #e91e63) !important;
}

@media (max-width: 600px) {
    .upload-tabs > button {
        padding: 1rem 1.2rem !important;
        font-size: 1.25rem !important;
    }
}

/* ---------------------------------------------------------------------
   Respect prefers-reduced-motion.

   Everything added to this file moves: the onboarding tour's spotlight
   slides across the viewport between steps, the checklist's progress bar
   animates its width, and the hero and chip controls cross-fade. None of
   it asked the viewer first.

   The spotlight is the one that matters. It travels the full height of a
   long page on every Next, which is exactly the kind of large-area motion
   that triggers vestibular symptoms -- and it appears automatically, on a
   creator's first visit, before they have chosen anything.

   Transitions are reduced to effectively instant rather than removed, so
   state changes still register as changes.
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    /* Everything, not a list.
     *
     * A hand-maintained selector list only ever covers what someone
     * remembered, and most of the motion on this site is not ours: it is
     * Angular Material's ripples, dialog and menu entrances, tab slides and
     * expansion panels, all of which live in the frozen styles.*.css that
     * cannot be edited. A universal rule reaches those too.
     *
     * 0.01ms rather than 0: transitionend and animationend still fire, so
     * anything waiting on them to clean up or advance still runs. Setting
     * these to 0 is the usual way this rule breaks a UI. */
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

    /* Decorative loops are stopped outright: at 0.01ms an infinite
       animation becomes a flicker, which is worse than stillness. */
    .play-button-animation {
        animation: none !important;
    }

    /* Spinners and indeterminate bars keep moving, deliberately.
     *
     * They are functional feedback, not decoration -- a frozen spinner
     * reads as a hung page, and the universal rule above would otherwise
     * reduce them to a stutter. The guidance this block implements is
     * aimed at large-area motion, parallax and autoplay, not at a 40px
     * indicator telling someone their upload is still going. */
    .mat-spinner,
    .mat-progress-spinner,
    .mat-progress-spinner circle,
    .mat-spinner circle,
    .mat-progress-bar-indeterminate,
    .mat-progress-bar-primary,
    .mat-progress-bar-secondary {
        /* An explicit 2s -- Material's own cycle length -- rather than
           `revert`, whose fallback on an older engine is the 0.01ms set
           above, i.e. a stuttering spinner. A concrete value cannot fail
           that way. */
        animation-duration: 2s !important;
        animation-iteration-count: infinite !important;
    }

    html {
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------
   Finish-your-profile prompt.

   A bar above the feedback button, not a modal: nothing it asks for is
   required to use the site, so it should be ignorable. Sits on the left
   so it cannot cover the feedback FAB on the right.
   --------------------------------------------------------------------- */

.hvn-profile-prompt {
    position: fixed !important;
    left: 2rem !important;
    bottom: 2rem !important;
    z-index: 900 !important;
    max-width: 46rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 2rem !important;
    flex-wrap: wrap !important;
    background: #1c1c22 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 1rem !important;
    padding: 1.6rem 2rem !important;
    box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.45) !important;
}

.hvn-profile-prompt-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.3rem !important;
    flex: 1 1 22rem !important;
    min-width: 0 !important;
}

.hvn-profile-prompt-text strong {
    font-size: 1.45rem !important;
    font-weight: 600 !important;
}

.hvn-profile-prompt-text span {
    font-size: 1.25rem !important;
    opacity: 0.72 !important;
    line-height: 1.5 !important;
}

.hvn-profile-prompt-actions {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    flex: 0 0 auto !important;
}

.hvn-profile-prompt-dismiss {
    background: none !important;
    border: 0 !important;
    color: inherit !important;
    opacity: 0.6 !important;
    font-size: 1.25rem !important;
    cursor: pointer !important;
    padding: 0.6rem 0.4rem !important;
}

.hvn-profile-prompt-dismiss:hover { opacity: 1 !important; }

@media (max-width: 600px) {
    /* Full width at the bottom, clear of the feedback button. */
    .hvn-profile-prompt {
        left: 1.2rem !important;
        right: 1.2rem !important;
        bottom: 8.5rem !important;
        max-width: none !important;
        padding: 1.4rem 1.6rem !important;
    }
    .hvn-profile-prompt-actions {
        width: 100% !important;
        justify-content: space-between !important;
    }
}

/* =====================================================================
   Ad slots
   =====================================================================
   ad-host is already flex-centred by the bundle, but the bundle also
   gives its child `width: 100%`. A fixed-size ad unit -- a 300x250 GPT
   slot, or any AdSense unit that is not data-ad-format="auto" -- renders
   an iframe inside that full-width child and ends up hard against the
   left edge, with the rest of the row empty. Verified with Google's
   sample unit /6355419/Travel/Europe/France/Paris on the creators page.

   text-align centres the iframe, which is inline-level, without
   affecting a responsive unit that fills the width anyway. */
ad-host > :not(img) {
    text-align: center !important;
}