/* Shared desktop frame for content panels and authentication. Original page
   styles own their surfaces, typography, controls and phone/tablet layouts. */
@media (min-width: 851px) {
    :is(.page-upload, .page-shop, .page-explore, .page-login, .page-signup, .page-analysis, .page-notifications, .page-analytics, .page-score-examples, .page-dashboard, .page-settings, .page-profile)[data-ad-layout="responsive"] .responsive-ads-shell {
        --desktop-content-width: clamp(800px, calc(600px + 22vw), 1200px);
        --desktop-top-gap: clamp(20px, calc(1vw + var(--viewport-unit) * 1.5), 48px);
        --desktop-panel-min-height: max(600px, calc(var(--page-available-height) - 2 * var(--desktop-top-gap)));
        --ad-flow: 0;
        --responsive-content-max: var(--desktop-content-width);
        width: 100%;
        max-width: none;
        padding: var(--desktop-top-gap) 16px;
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--desktop-content-width)) minmax(0, 1fr);
        grid-template-areas: "left content right";
        gap: 0;
        align-items: start;
        align-content: start;
    }

    :is(.page-upload, .page-shop, .page-explore, .page-login, .page-signup, .page-analysis, .page-notifications, .page-analytics, .page-score-examples, .page-dashboard, .page-settings, .page-profile)[data-ad-layout="responsive"] .responsive-ads-shell > [data-ad-slot="top"] {
        display: none;
    }

    :is(.page-upload, .page-shop, .page-explore, .page-login, .page-signup, .page-analysis, .page-notifications, .page-analytics, .page-score-examples, .page-dashboard, .page-settings, .page-profile)[data-ad-layout="responsive"] .responsive-ads-shell > :is([data-ad-slot="left"], [data-ad-slot="right"]) {
        display: flex;
        position: relative;
        top: auto;
        width: 160px;
        height: 600px;
        min-height: 600px;
        margin: 0;
        justify-self: center;
        align-self: center;
    }

    :is(.page-upload, .page-explore) .responsive-ads-shell .site-ads-content > :is(.upload-main, .explore-main) {
        width: 100%;
        min-height: 0;
        margin: 0;
        padding: 0;
    }

    .page-upload .responsive-ads-shell .upload-page {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .page-upload .responsive-ads-shell .upload-card,
    .page-shop .responsive-ads-shell .site-ads-content > .shop-page,
    .page-explore .responsive-ads-shell .explore-page,
    .page-analysis .responsive-ads-shell .analysis-card,
    .page-notifications .responsive-ads-shell .notifications-card,
    .page-score-examples .responsive-ads-shell .score-examples-panel,
    .page-dashboard .responsive-ads-shell .dashboard-card,
    .page-settings .responsive-ads-shell .settings-card,
    .page-profile .responsive-ads-shell .profile-card,
    .page-analytics .responsive-ads-shell .site-ads-content > .analytics-page {
        width: 100%;
        max-width: var(--desktop-content-width);
        /* Fill unused desktop height while allowing longer content to scroll.
           The matching outer insets belong to the shared wrapper. */
        min-height: var(--desktop-panel-min-height);
        align-content: start;
        margin: 0;
        padding: clamp(30px, calc(18px + 1.25vw), 50px)
            clamp(32px, calc(18px + 2vw), 68px)
            clamp(38px, calc(20px + 1.75vw), 64px);
    }

    .page-upload .upload-header,
    .page-upload .upload-form,
    .page-explore .explore-header {
        width: 100%;
        max-width: clamp(640px, calc(400px + 20vw), 920px);
        margin-inline: auto;
    }

    /* A saved phone layout can already be applied before resizing to desktop.
       Keep those legacy dimensions from overriding the fluid center column. */
    .page-upload .responsive-ads-shell .upload-card.has-page-layout,
    .page-shop .responsive-ads-shell .site-ads-content > .shop-page.has-page-layout,
    .page-explore .responsive-ads-shell .explore-page.has-page-layout,
    .page-analysis .responsive-ads-shell .analysis-card.has-page-layout,
    .page-notifications .responsive-ads-shell .notifications-card.has-page-layout,
    .page-score-examples .responsive-ads-shell .score-examples-panel.has-page-layout,
    .page-dashboard .responsive-ads-shell .dashboard-card.has-page-layout,
    .page-settings .responsive-ads-shell .settings-card.has-page-layout,
    .page-profile .responsive-ads-shell .profile-card.has-page-layout,
    .page-analytics .responsive-ads-shell .site-ads-content > .analytics-page.has-page-layout,
    :is(.page-login, .page-signup) .responsive-ads-shell .auth-content.has-page-layout {
        width: 100% !important;
        max-width: var(--desktop-content-width) !important;
        height: auto !important;
        max-height: none;
        transform: none !important;
    }

    .page-upload .upload-header {
        margin-bottom: clamp(20px, 1.5vw, 30px);
    }

    .page-upload .upload-subtitle {
        max-width: clamp(560px, 42vw, 700px);
    }

    /* Both methods share one height budget. Camera status/actions use their
       natural height and the portrait preview fits the space left above. */
    .page-upload .upload-form {
        --upload-mode-height: clamp(240px, calc(var(--viewport-height) - 620px), 560px);
    }

    .page-upload #filePanel,
    .page-upload .camera-panel {
        height: var(--upload-mode-height);
    }

    .page-upload .drop-zone {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .page-upload .drop-zone .image-preview {
        width: auto;
        height: 100%;
        max-width: 100%;
        object-fit: contain;
    }

    .page-upload .camera-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: minmax(0, 1fr) auto auto;
    }

    .page-upload .upload-camera-stage,
    .page-upload .camera-capture-preview {
        grid-row: 1;
        justify-self: center;
        width: auto;
        height: 100%;
        min-height: 0;
        max-width: 100%;
        margin: 0;
    }

    .page-upload .upload-camera-stage { grid-column: 1 / -1; }
    .page-upload .camera-capture-preview { grid-column: 2; }
    .page-upload .camera-panel:has(.camera-capture-preview:not([hidden])) .upload-camera-stage { grid-column: 1; }
    .page-upload .upload-camera-status { grid-column: 1 / -1; grid-row: 2; }
    .page-upload .upload-camera-actions { grid-column: 1 / -1; grid-row: 3; }
    .page-upload .camera-action-btn { margin-top: 0; }

    .page-shop .shop-catalog {
        gap: clamp(16px, 1.25vw, 30px);
    }

    :is(.page-analysis, .page-notifications, .page-score-examples, .page-dashboard, .page-settings, .page-profile) .responsive-ads-shell .site-ads-content > :is(.analysis-page, .notifications-page, .score-examples-page, .dashboard-page, .settings-page, .profile-page) {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    :is(.page-analysis, .page-notifications, .page-analytics, .page-score-examples, .page-dashboard, .page-settings, .page-profile) .responsive-ads-shell [data-ad-anchor] {
        display: none;
    }

    :is(.page-analysis, .page-notifications) :is(.analysis-header, .notifications-header) {
        margin-bottom: clamp(20px, 1.5vw, 30px);
    }

    .page-notifications .notifications-header { flex-wrap: wrap; }
    .page-notifications .notifications-actions { gap: clamp(10px, .85vw, 18px); }
    .page-notifications .notifications-item { overflow-wrap: anywhere; }

    .page-analysis .analysis-results {
        --analysis-preview-width: clamp(240px, 20vw, 360px);
        grid-template-columns: minmax(0, var(--analysis-preview-width)) minmax(0, 1fr);
        gap: clamp(16px, 1.25vw, 30px);
    }

    /* Reserve the portrait area before selection, and use the same bounds for
       every photo so its aspect ratio cannot move the surrounding frame. */
    .page-analysis .analysis-photo-stage { min-height: calc(var(--analysis-preview-width) * 4 / 3); }
    .page-analysis .analysis-preview { width: 100%; max-width: none; }
    .page-analysis .analysis-photos { min-height: 132px; }
    .page-analysis .analysis-photo-actions { flex-wrap: wrap; }
    .page-analysis .analysis-layout { gap: clamp(16px, 1.25vw, 30px); }

    .page-analytics .analytics-header { max-width: none; }
    .page-analytics .analytics-face-controls { gap: clamp(10px, .85vw, 18px); }
    .page-analytics .analytics-summary-grid { gap: clamp(10px, .85vw, 18px); }
    /* Standard and Targeted share a budget; validation can still grow the
       panel naturally rather than clipping messages or shrinking controls. */
    .page-analytics .analytics-order-panel { min-height: 300px; align-content: start; }

    .page-score-examples .score-examples-header { margin-bottom: clamp(20px, 1.5vw, 30px); }
    .page-score-examples .score-examples-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: clamp(16px, 1.25vw, 30px);
    }
    /* The score scale selects up to eleven examples. Three equal rows reserve
       the same gallery budget for either gender, including a shorter result.
       Additional content can still create rows and extend the page naturally. */
    .page-score-examples .score-examples-grid:not(:empty) {
        grid-template-rows: repeat(3, minmax(0, 1fr));
    }
    .page-score-examples .score-examples-status { min-height: 21px; }
    .page-score-examples .score-examples-status[hidden] {
        display: block;
        visibility: hidden;
    }

    /* Keep these long account pages in natural document flow. Preserve the
       original vertical padding budget instead of compressing their content
       to fit the viewport; the shared height is only a minimum. */
    :is(.page-dashboard, .page-settings, .page-profile) .responsive-ads-shell :is(.dashboard-card, .settings-card, .profile-card) {
        height: auto;
        max-height: none;
        overflow: visible;
        padding-top: max(40px, clamp(30px, calc(18px + 1.25vw), 50px));
        padding-bottom: max(40px, clamp(38px, calc(20px + 1.75vw), 64px));
    }
    .page-dashboard .dashboard-card { --dashboard-section-gap: clamp(32px, 2vw, 40px); }
    .page-dashboard .dashboard-header { max-width: none; margin-bottom: var(--dashboard-section-gap); }
    .page-dashboard .dashboard-overview { gap: clamp(16px, 1.25vw, 30px); margin-bottom: var(--dashboard-section-gap); }
    .page-dashboard .dashboard-grid { gap: clamp(24px, 1.5vw, 30px); }
    .page-dashboard :is(.confidence-meter-card, .photo-rating-section, .photo-management, .dashboard-progress) {
        margin-top: var(--dashboard-section-gap);
        padding: 24px;
    }
    .page-dashboard .dashboard-actions { margin-top: var(--dashboard-section-gap); }
    .page-dashboard .dashboard-lower-ad { display: none; }
    .page-settings .settings-help { max-width: 75ch; }

    .page-profile .profile-card { --profile-section-gap: clamp(32px, 2vw, 40px); }
    .page-profile .profile-card > .profile-hero-card {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        gap: var(--profile-section-gap);
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }
    .page-profile .profile-hero-card::before { content: none; }
    .page-profile .profile-info-column { padding: 0; }
    .page-profile .profile-title-row { flex-wrap: wrap; gap: 16px; }
    .page-profile .profile-title-row h1 { font-size: 40px; line-height: 1.08; }
    .page-profile .profile-bio { margin-block: 24px; }
    .page-profile .profile-stats { gap: clamp(10px, 1vw, 16px); }
    .page-profile .profile-section-card {
        width: 100%;
        max-width: none;
        margin-top: var(--profile-section-gap);
        padding: 24px;
    }

    /* Auth uses the same outer gap and gutters, with a narrower center column.
       Center the whole grid row so even a panel shorter than the ads shares
       their midpoint. Intrinsic row sizing preserves scrolling on short screens. */
    :is(.page-login, .page-signup)[data-ad-layout="responsive"] .responsive-ads-shell {
        --auth-panel-width: clamp(560px, calc(420px + 12vw), 680px);
        --desktop-content-width: var(--auth-panel-width);
        --panel-gap: var(--desktop-top-gap);
        padding: var(--panel-gap) 16px;
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--auth-panel-width)) minmax(0, 1fr);
        align-items: center;
        align-content: center;
    }

    /* Keep form controls and spacing content-driven at every desktop height. */
    :is(.page-login, .page-signup) .responsive-ads-shell .auth-content {
        --auth-control-gap: 14px;
        --auth-section-gap: 22px;
        --auth-input-height: 54px;
        --auth-provider-height: 54px;
        width: 100%;
        max-width: var(--auth-panel-width);
        min-height: 0;
        margin: 0 auto;
        padding: 36px clamp(32px, 3vw, 48px) 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--auth-section-gap);
    }

    :is(.page-login, .page-signup) .auth-content > * {
        width: 100%;
        max-width: 520px;
        flex-shrink: 0;
        margin: 0;
    }

    :is(.page-login, .page-signup) .auth-header { display: block; }
    :is(.page-login, .page-signup) .auth-header h1 { margin-bottom: 8px; text-align: center; }
    :is(.page-login, .page-signup) .auth-header p,
    :is(.page-login, .page-signup) .provider-stack { margin-bottom: 0; }
    :is(.page-login, .page-signup) #authProviders:empty { display: none; }
    :is(.page-login, .page-signup) .auth-content input:not([type="radio"]),
    :is(.page-login, .page-signup) .auth-content form > button[type="submit"] {
        font-size: 16px;
    }

    /* More fields need slightly tighter rhythm, without shrinking controls. */
    .page-signup .responsive-ads-shell .auth-content {
        --auth-control-gap: 10px;
        --auth-section-gap: 18px;
    }

    :is(.page-login, .page-signup) .auth-content form > button[type="submit"] {
        margin-top: 8px;
    }
}

/* Long account pages repeat side ads using the leaderboard's spacing. The
   content alone determines height; cached placements never lengthen a page. */
.responsive-ad-rail { display: none; }
@media (min-width: 1360px) {
    :is(.page-dashboard, .page-settings, .page-profile) .responsive-ad-rail {
        display: flex;
        flex-direction: column;
        align-items: center;
        align-self: stretch;
        min-width: 0;
        contain: size;
        gap: clamp(600px, var(--viewport-height), 1200px);
        padding-top: max(0px, calc((var(--desktop-panel-min-height) - 600px) / 2));
    }
    .responsive-ad-rail-left { grid-area: left; }
    .responsive-ad-rail-right { grid-area: right; }
    :is(.page-dashboard, .page-settings, .page-profile) .responsive-ad-rail > .responsive-ad {
        position: relative;
        top: auto;
        width: 160px;
        height: 600px;
        min-height: 600px;
        flex: 0 0 600px;
        margin: 0;
    }
    :is(.page-dashboard, .page-settings, .page-profile) .responsive-ad-rail[hidden],
    :is(.page-dashboard, .page-settings, .page-profile) .responsive-ad-rail > [hidden] { display: none; }
}

/* The content width does not change when the side ads disappear. */
@media (min-width: 851px) and (max-width: 1359px) {
    :is(.page-upload, .page-shop, .page-explore, .page-analysis, .page-notifications, .page-analytics, .page-score-examples, .page-dashboard, .page-settings, .page-profile)[data-ad-layout="responsive"] .responsive-ads-shell {
        grid-template-columns: minmax(0, var(--desktop-content-width));
        grid-template-areas: "content";
        justify-content: center;
    }

    :is(.page-upload, .page-shop, .page-explore, .page-login, .page-signup, .page-analysis, .page-notifications, .page-analytics, .page-score-examples, .page-dashboard, .page-settings, .page-profile)[data-ad-layout="responsive"] .responsive-ads-shell > :is([data-ad-slot="left"], [data-ad-slot="right"]) {
        display: none;
    }
}