/* Stable, repository-defined ad slots. */
.responsive-ads-shell {
    --ad-flow: 0;
    --page-gutter: clamp(12px, 2vw, 28px);
    --responsive-content-max: 1100px;
    width: 100%;
    margin-inline: auto;
    padding: 24px 0 48px;
    display: grid;
    grid-template-columns:
        minmax(160px, 1fr)
        minmax(0, var(--responsive-content-max))
        minmax(160px, 1fr);
    grid-template-areas:
        "left top right"
        "left content right"
        "left bottom right";
    column-gap: 0;
    row-gap: 40px;
    align-items: start;
}
.page-home .responsive-ads-shell { --responsive-content-max: 1480px; }
.page-compare .responsive-ads-shell { --responsive-content-max: 980px; }
.page-upload .responsive-ads-shell { --responsive-content-max: 760px; }
@media (min-width: 801px) {
    :is(.responsive-ads-shell, .site-ads-shell) {
        min-height: var(--page-available-height);
        /* Extra height belongs below the content, not between grid rows. */
        align-content: start;
    }
    .site-ads-shell .site-ads-content > main { min-height: 0; }
}
/* Compare and the other mobile pages share phone spacing and ad geometry.
   Each shell reuses Compare's original token values. */
@media (max-width: 600px) {
    :is(.page-compare, .page-explore, .page-upload, .page-score-examples, .page-profile, .page-auth, .page-dashboard, .page-analysis, .page-notifications, .page-settings, .page-shop, .page-analytics)[data-ad-layout="responsive"] .responsive-ads-shell,
    .page-leaderboard[data-ad-layout="manual"] .site-ads-shell {
        /* Stable content sizing is the default on every mobile page. */
        --compare-viewport-unit: var(--mobile-layout-viewport-unit, 1svh);
        --compare-compact-space: clamp(0px, calc((780px - var(--compare-viewport-unit) * 100) / 5), 16px);
        --compare-gap: clamp(10px, calc(var(--compare-viewport-unit) * 1.8 - var(--compare-compact-space) * .2), 22px);
        --compare-section-gap: clamp(6px, calc(var(--compare-viewport-unit) * 1.4 - var(--compare-compact-space) * .3), 16px);
        --compare-control-gap: clamp(5px, calc(var(--compare-viewport-unit) - var(--compare-compact-space) * .12), 10px);
        --compare-card-padding: clamp(9px, 2.5vw, 12px);
        --compare-ad-height: clamp(50px, 12.5vw, 56px);
        --compare-ad-mat-padding: clamp(6px, 1.7vw, 8px);
    }
}
.responsive-ads-shell > .site-ads-content {
    grid-area: content;
    min-width: 0;
    container: page-content / inline-size;
}
.responsive-ad {
    --surface-radius: 16px;
    /* Keep the surface highlight anchored to the card in every layout. */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: min(728px, 100%);
    max-width: 100%;
    min-width: 0;
    min-height: 110px;
    margin-inline: auto;
    padding: 10px 0;
    gap: 6px;
    text-align: center;
    overflow: hidden;
}
.responsive-ad-label {
    color: #626b75;
    font: 700 10px/1.4 "Inter", sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.responsive-ad-creative:empty { display: none; }
.responsive-ad-creative { max-width: 100%; min-width: 0; }
.responsive-ad-creative :is(img, video, iframe) { max-width: 100%; }
.responsive-ads-shell > [data-ad-slot="top"] { grid-area: top; }
.responsive-ads-shell > [data-ad-slot="left"] { grid-area: left; }
.responsive-ads-shell > [data-ad-slot="right"] { grid-area: right; }
.responsive-ads-shell > [data-ad-slot="bottom"] { grid-area: bottom; }
.responsive-ads-shell > :is([data-ad-slot="left"], [data-ad-slot="right"]) {
    width: 160px;
    min-height: 600px;
    position: sticky;
    top: calc(var(--navbar-footprint) + 22px);
    justify-self: center;
}
/* Empty anchors have no footprint on desktop. Ads remain outside forms,
   hidden result panels, and voting/camera surfaces. */
[data-responsive-ads] [data-ad-anchor]:empty { display: none; }
[data-responsive-ads] [data-ad-anchor]:not(:empty) {
    min-width: 0;
    width: 100%;
    grid-column: 1 / -1;
    margin-block: 40px;
    clear: both;
}
.responsive-ads-shell[data-ad-presentation="inline"] {
    --ad-flow: 1;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "content" "left" "right" "bottom";
    max-width: none;
    padding-inline: var(--page-gutter);
}
.responsive-ads-shell[data-ad-presentation="inline"] > :is([data-ad-slot="left"], [data-ad-slot="right"]) {
    position: relative;
    top: auto;
    width: min(728px, 100%);
    min-height: 110px;
}
.responsive-ads-shell :where(main, section, article, form, fieldset, label, .face-slot) { min-width: 0; }
.responsive-ads-shell :where(h1, h2, h3, p, a, button, label, strong) { overflow-wrap: anywhere; }
.responsive-ads-shell :where(input, select, textarea) { min-width: 0; max-width: 100%; }
.responsive-ads-shell :where(img, video, canvas) { max-width: 100%; }
.responsive-ads-shell .site-ads-content > :is(main, .login-container, .signup-container) {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    padding: 0;
    min-height: 0;
}
.responsive-ads-shell :is(.upload-page, .explore-page) { margin-top: 0; padding-top: 0; }
.responsive-ads-shell .explore-page { padding-top: clamp(24px, 4cqi, 48px); }
.responsive-ads-shell :is(.dashboard-card, .analysis-card, .progress-card, .settings-card, .explore-page) {
    padding: clamp(18px, 4cqi, 40px);
}
.responsive-ads-shell .home-main { overflow: visible; }
.responsive-ads-shell .home-hero {
    min-height: 0;
    padding-block: clamp(24px, 4cqi, 56px);
    gap: clamp(20px, 3cqi, 40px);
}
.responsive-ads-shell .home-hero-copy h1 { font-size: clamp(2.1rem, 4.5cqi, 3.7rem); }
.responsive-ads-shell .home-live { padding-inline: 0; }
.responsive-ads-shell .home-faces { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.responsive-ads-shell .home-live-demo { padding: clamp(12px, 2cqi, 28px); }
.responsive-ads-shell .home-live-question { font-size: clamp(.85rem, 1.8cqi, 1.2rem); }
.responsive-ads-shell .compare-card { padding: clamp(10px, 3cqi, 30px); }
.responsive-ads-shell .faces { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(5px, 2cqi, 24px); }
.responsive-ads-shell .face-card { width: 100%; min-width: 0; }
.responsive-ads-shell .face-card span { white-space: normal; text-align: center; }
.responsive-ads-shell .analytics-page h1 { font-size: clamp(30px, 5cqi, 56px); }
.responsive-ads-shell .analytics-page :is(label, button) { max-width: 100%; }
.responsive-ads-shell .location-grid { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.responsive-ads-shell .about-page { padding: clamp(20px, 4cqi, 48px) !important; }
.responsive-ads-shell :is(.login-container, .signup-container) { flex-direction: column; }
.about-page h1 { margin-bottom: 24px; }
.about-page p { line-height: 1.7; margin-block: 16px; }
.responsive-ad-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.responsive-ad-settings[hidden] { display: none; }
body[data-ad-layout="responsive"] .ad-layout-admin { max-width: calc(100vw - 24px); flex-wrap: wrap; }

/* Break on the width available to the content, not just the viewport. */
@container page-content (max-width: 900px) {
    .dashboard-layout, .profile-hero-card, .analysis-layout { grid-template-columns: minmax(0, 1fr); }
    .shop-bundle, .shop-product { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px; }
    .shop-feature-list-bundle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-hero { grid-template-columns: minmax(0, 1fr); }
    .home-hero-copy { margin-inline: auto; align-items: center; text-align: center; }
    .home-hero-copy h1 { max-width: 16ch; }
    .home-live { max-width: 660px; margin-inline: auto; }
    .home-hero [data-ad-anchor] { margin-block: 0; }
    .analysis-photos { max-height: none; }
}
@container page-content (max-width: 600px) {
    .profile-stats, .shop-feature-list, .shop-feature-list-bundle { grid-template-columns: minmax(0, 1fr); }
    .analysis-header, .profile-title-row, .section-header, .progress-chart-header { flex-wrap: wrap; gap: 12px; }
    .dashboard-actions, .photo-list-header { flex-direction: column; align-items: stretch; }
    .analytics-page .metric-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .analytics-page .metric-row > :first-child { grid-column: 1 / -1; }
    .analytics-page :is(.controls, #target-order-form) > * { flex: 1 1 100%; }
    .analytics-card { padding: 18px; }
    .compare-header h1 { font-size: clamp(26px, 7cqi, 34px); }
    .face-card { padding: 6px; }
    .vs-badge { width: 32px; height: 32px; font-size: 11px; }
    .upload-camera-actions { grid-template-columns: minmax(0, 1fr); }
}
/* The homepage keeps its original 1480px composition until there is enough
   room to center a 160px ad within each outer gutter. */
@media (max-width: 1879px) {
    .page-home .responsive-ads-shell {
        --ad-flow: 1;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "top" "content" "left" "right" "bottom";
        gap: 32px;
        padding-inline: 0;
    }
    .page-home .responsive-ads-shell > :is([data-ad-slot="left"], [data-ad-slot="right"]) {
        position: relative;
        top: auto;
        width: min(728px, 100%);
        min-height: 110px;
    }
}
@media (max-width: 1519px) {
    .responsive-ads-shell {
        --ad-flow: 1;
        max-width: none;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "top" "content" "left" "right" "bottom";
        gap: 32px;
        padding-inline: var(--page-gutter);
    }
    .page-home .responsive-ads-shell { padding-inline: 0; }
    .responsive-ads-shell > :is([data-ad-slot="left"], [data-ad-slot="right"]) {
        position: relative;
        top: auto;
        width: min(728px, 100%);
        min-height: 110px;
    }
}
@media (max-width: 850px) {
    .responsive-ads-shell { padding-top: 16px; }
    .responsive-ad { min-height: 100px; }
    .responsive-ads-shell .responsive-ad { position: relative; top: auto; min-height: 100px; }
    .responsive-ads-shell :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: 16px; }
}
@media (min-width: 1201px) and (max-height: 730px) {
    .responsive-ads-shell > :is([data-ad-slot="left"], [data-ad-slot="right"]) { position: relative; top: auto; }
}

/* Leaderboard: only content descendants, never its shell or ad selectors. */
.page-leaderboard .full-leaderboard-card { min-width: 0; container: rankings / inline-size; }
.page-leaderboard .leaderboard-location-controls { flex-wrap: wrap; }
.page-leaderboard .leaderboard-select-field { min-width: 0; max-width: 100%; }
.page-leaderboard .leaderboard-select-field select { min-width: 0; max-width: 100%; }
.page-leaderboard .leaderboard-map-toolbar { flex-wrap: wrap; }
.page-leaderboard :is(.leaderboard-person, .stats, .leaderboard-map-frame) { min-width: 0; }
@container rankings (max-width: 680px) {
    .leaderboard-list[data-view="gallery"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .leaderboard-location-controls > * { flex: 1 1 140px; }
    .leaderboard-select-field select, .leaderboard-map-toggle { width: 100%; }
    .leaderboard-row { grid-template-columns: 32px 48px minmax(0, 1fr); gap: 10px; }
    .leaderboard-list[data-view="compact"] .stats { grid-column: 3; text-align: left; }
    .leaderboard-map-stage { grid-template-columns: minmax(0, 1fr); }
    .leaderboard-map-zoom { flex-direction: row; justify-content: center; }
    .leaderboard-map-zoom .map-zoom-slider { writing-mode: horizontal-tb; width: 140px; height: 22px; }
    .leaderboard-title-block h1 { font-size: clamp(26px, 8cqi, 40px); }
    .leaderboard-person :is(.face-id, .profile-link) { overflow-wrap: anywhere; }
}
@container rankings (max-width: 300px) {
    .leaderboard-list[data-view="gallery"] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
    .page-leaderboard .full-leaderboard-card { padding: clamp(12px, 3vw, 20px); }
}