/* Match the selector's actual middle-page footprint, including the ring,
   information panel and vertical padding. Content must not move the footer. */
/* Keep the vase name above the printed rule, and scroll only its description. */
.vase-chapter .right-info .vase-info { display: flex; flex-direction: column; overflow: visible !important; }
.vase-chapter .right-info .vase-info h2 {
    flex: 0 0 auto;
    background: none !important;
    transform: translateY(-42px);
}
.vase-chapter .vase-details { flex: 1; min-height: 0; overflow-y: auto; padding-right: 10px; }
@media (max-width: 760px) {
    .vase-chapter .right-info .vase-info h2 { transform: none; }
    .vase-chapter .vase-details { overflow: visible; }
}

@media (min-width: 761px) {
    .vase-chapter, .flower-chapter, .showcase-chapter {
        --chapter-padding: clamp(26px, 3.3vw, 54px);
        --chapter-ring-size: clamp(430px, 42vw, 700px);
        --chapter-ring-margin: 0px;
        --chapter-info-height: clamp(390px, 58vh, 520px);
        --chapter-info-margin: clamp(64px, 9vh, 108px);
        --chapter-height: max(
            clamp(600px, calc(100svh - 260px), 840px),
            calc(var(--chapter-ring-size) + var(--chapter-ring-margin) + var(--chapter-padding) + var(--chapter-padding)),
            calc(var(--chapter-info-height) + var(--chapter-info-margin) + var(--chapter-padding) + var(--chapter-padding))
        );
    }
    .vase-chapter > main,
    .flower-chapter > main.workbench,
    .showcase-chapter > main.container {
        flex: 1 0 auto;
        width: 100%;
        max-width: none;
        height: var(--chapter-height);
        min-height: var(--chapter-height) !important;
        margin: 0;
        overflow: hidden;
    }
    /* Keep the reference geometry and the shared height driven by the same values. */
    .vase-chapter > main { padding-block: var(--chapter-padding) !important; }
    .vase-chapter .selector-container { height: var(--chapter-ring-size) !important; }
    .vase-chapter .right-info { height: var(--chapter-info-height) !important; margin-top: var(--chapter-info-margin) !important; }

    .flower-chapter .workbench { grid-template-rows: minmax(0, 1fr); }
    .flower-chapter .bench-panel { min-height: 0; height: 100%; overflow: hidden; }
    .flower-chapter .panel-heading,
    .flower-chapter .catalog-tools,
    .flower-chapter .stage-heading,
    .flower-chapter .summary-heading,
    .flower-chapter .refine-controls,
    .flower-chapter #finish-button { flex-shrink: 0; }
    .flower-chapter .flower-grid { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
    .flower-chapter .stage-surface { min-height: 0; container-type: size; }
    .flower-chapter .arrangement { width: min(75%, 520px, 94cqh); }
    .flower-chapter .summary-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-right: 4px; }
    .flower-chapter .selected-list { min-height: 100px; overflow: visible; }
    .flower-chapter #finish-button { margin-top: 12px; }

    .showcase-chapter > main.container { padding-block: var(--chapter-padding); }
    .showcase-chapter .showcase-layout { height: 100%; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
    .showcase-chapter .artwork-display,
    .showcase-chapter .artwork-image,
    .showcase-chapter .vase-container { height: 100%; min-height: 0; }
    .showcase-chapter .review-section { height: 100%; min-height: 0; max-height: none; overflow-y: auto; scrollbar-width: thin; }
    .showcase-chapter .review-container { flex: 0 0 auto; min-height: 0; }
    .showcase-chapter .saved-arrangement { width: min(75%, 520px, calc(var(--chapter-height) - var(--chapter-padding) - var(--chapter-padding) - 20px)); }
}
@media (min-width: 761px) and (max-width: 992px) {
    .vase-chapter, .flower-chapter, .showcase-chapter { --chapter-ring-margin: 50px; }
}
@media (min-width: 761px) and (max-width: 850px) {
    .flower-chapter > main.workbench { display: flex; flex-direction: column; }
    .flower-chapter .mobile-sections { flex: 0 0 auto; }
    .flower-chapter .bench-panel.mobile-active { flex: 1; min-height: 0; height: 0; }
    .showcase-chapter .showcase-layout { gap: 20px; }
    .showcase-chapter .review-container { padding: 20px; }
}