.stool-tracker-combined {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 1.5rem;
    max-width: unset;
    width: 100%;
    box-sizing: border-box;
}
/* Desktop: keep panels independent after baseline height is captured in JS.
   Mobile remains column-based and full width. */
@media (min-width: 768px) {
    .stool-tracker-combined {
        align-items: flex-start;
    }

    .stool-tracker-combined__panel {
        min-height: var(--stool-combined-initial-height, 0px);
    }
}

.stool-tracker-combined .cmp-stoolchecker{
    justify-content: space-around;
}

/* @media (min-width: 1440px){
    .stool-tracker-combined {
        max-width: 1440px;
    }
} */

.stool-tracker-combined__tabs {
    display: none;
}

.stool-tracker-combined__panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* Enable container queries so children can respond to panel width, not viewport */
    container-type: inline-size;
    container-name: combined-panel;
}

/* Combined tool titles: larger on desktop, hidden on mobile (tabs already label each tool) */
@media (min-width: 768px) {
    .stool-tracker-combined__panel .cmp-stoolcheckermanual__tool-title,
    .stool-tracker-combined__panel .cmp-stoolchecker__tool-title {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
}

/* Desktop order: Manual first, AI second */
@media (min-width: 768px) {
    .stool-tracker-combined__panel[data-panel="manual"] {
        order: 1;
    }
    .stool-tracker-combined__panel[data-panel="ai"] {
        order: 2;
    }
}

/* Inner trackers fill their panel height */
.stool-tracker-combined__panel .cmp-stoolcheckermanual,
.stool-tracker-combined__panel .stoolchecker {
    flex: 1;
    height: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
}

/* ── Button alignment ────────────────────────────────────────────────────────
    In side-by-side mode both panels start from the same baseline min-height,
    then can grow independently. These rules keep each action row anchored at
    the bottom of its own panel.
    ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    /* Manual side */
    .stool-tracker-combined__panel .cmp-stoolcheckermanual {
        display: flex;
        flex-direction: column;
    }
    .stool-tracker-combined__panel .cmp-stoolcheckermanual__wrapper {
        flex-shrink: 0;
        margin: 0 auto;
    }
    .stool-tracker-combined__panel .cmp-stoolcheckermanual__actions {
        margin-top: auto;
    }
    /* Keep button row layout stable when result state toggles */
    .stool-tracker-combined__panel .cmp-stoolcheckermanual.has-result .cmp-stoolcheckermanual__actions {
        margin-top: auto;
    }

    /* Upload side: flex column chain so image zone can grow */
    .stool-tracker-combined__panel .stoolchecker {
        display: flex;
        flex-direction: column;
        padding-bottom: 2.25rem; /* match manual tracker's bottom padding */
    }
    .stool-tracker-combined__panel .cmp-stoolchecker {
        flex: 1;
        min-height: 0;
    }
    /* Image zone absorbs free space, pushing form (and upload button) to the bottom */
    .stool-tracker-combined__panel .cmp-stoolchecker__image {
        flex: 1;
        min-height: 280px;
        max-height: 420px;
    }
}

/* ── Background image switching based on panel width ─────────────────────
   Below 480px: portrait mobile bg. At 480px+: landscape desktop bg.
   ──────────────────────────────────────────────────────────────────────── */
@container combined-panel (max-width: 479px) {
    .cmp-stoolcheckermanual__background-image        { display: none; }
    .cmp-stoolcheckermanual__background-image-mobile { display: block; }

    /* Mobile bg (portrait frame): stool must fit inside the phone screen area.
       160px works for panels down to ~330px. */
    .cmp-stoolcheckermanual__image {
        width: 160px;
        height: 160px;
        max-width: 160px;
        max-height: 160px;
    }
}

@container combined-panel (min-width: 480px) {
    .cmp-stoolcheckermanual__background-image        { display: block; }
    .cmp-stoolcheckermanual__background-image-mobile { display: none; }

    /* Extra horizontal padding keeps hexagon handles ~21px from the panel edge
       instead of the default flush-against-edge (5px). */
    .cmp-stoolcheckermanual {
        padding-left: 3.5rem;
        padding-right: 3.5rem;
    }

    /* Stool scaled to always fit inside the desktop bg's circular ring.
       Measured: ring ≈ 43.3% of bg element width.
       bg_width   = cqw − 2×56px padding − 2×40px sliders = cqw − 192px
       ring_dia   ≈ 0.433 × (cqw − 192) = 0.433cqw − 83px
       target     = 90% of ring ≈ 0.39cqw − 75px
       Verified:  480px panel → ~112px  (ring ≈ 125px) ✓
                  512px panel → ~125px  (ring ≈ 139px) ✓
                  600px panel → ~159px  (ring ≈ 177px) ✓
                  750px panel → ~218px  (ring ≈ 241px) ✓  */
    .cmp-stoolcheckermanual__image {
        width:      clamp(90px, calc(39cqw - 75px), 220px);
        height:     clamp(90px, calc(39cqw - 75px), 220px);
        max-width:  220px;
        max-height: 220px;
    }
}

/* .cmp-stoolchecker height handled by flex: 1 inside .stoolchecker at ≥768px (see button alignment block above) */

@media (max-width: 767px) {
    .stool-tracker-combined {
        flex-direction: column;
        gap: 0;
    }

    .stool-tracker-combined__panel .cmp-stoolcheckermanual__tool-title,
    .stool-tracker-combined__panel .cmp-stoolchecker__tool-title {
        display: none;
    }

    /* Tab nav */
    .stool-tracker-combined__tabs {
        display: flex;
        border-radius: 1rem 1rem 0 0;
        overflow: hidden;
    }

    .stool-tracker-combined__tab {
        flex: 1;
        padding: 0.875rem 1rem;
        border: none;
        background: #c0dce9;
        color: #001489;
        font-size: 0.9375rem;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.2s ease;
        border-bottom: 3px solid transparent;
    }

    .stool-tracker-combined__tab.is-active {
        background: #e9f8ff;
        border-bottom-color: #001489;
    }

    /* Flatten top corners of the active panel so it flows from the tabs */
    .stool-tracker-combined__panel .cmp-stoolcheckermanual,
    .stool-tracker-combined__panel .stoolchecker {
        height: auto;
        border-radius: 0 0 1.5rem 1.5rem;
    }

    .stool-tracker-combined__panel .cmp-stoolcheckermanual {
        border-radius: 0 0 1.75rem 1.75rem;
    }

    /* Equalise button height on mobile: SEE RESULTS keeps its icon inline by default
       (manual-stool-tracker.css), making it 76px vs the uploader's 52px. Match them
       by moving the manual icon to absolute — the same pattern the uploader already uses. */
    .stool-tracker-combined .cmp-stoolcheckermanual__see-result-btn {
        position: relative;
        padding-right: 4rem;
        width: 100%;
        box-sizing: border-box;
    }
    .stool-tracker-combined .cmp-stoolcheckermanual__see-result-btn::after {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        height: 2rem;
        width: 2rem;
        display: block;
    }

    /* Hidden panel (only applied inside mobile breakpoint so desktop is unaffected) */
    .stool-tracker-combined__panel.is-hidden {
        display: none;
    }
}