/* DIY-only responsive layout. Desktop rules remain in /styles.css. */
@media (max-width: 768px),
       (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        height: 100%;
        overflow: hidden;
        overscroll-behavior: none;
    }

    .designer-shell,
    .designer-shell.has-layout-resizer {
        grid-template-rows: minmax(0, 60dvh) minmax(0, 40dvh);
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    .layout-resize-handle {
        display: none;
    }

    .stage {
        min-width: 0;
        min-height: 0;
    }

    .designer-shell.is-mobile-guide-open .stage {
        z-index: 20;
        overflow: visible;
    }

    .topbar {
        inset:
            max(8px, env(safe-area-inset-top))
            max(10px, env(safe-area-inset-right))
            auto
            max(10px, env(safe-area-inset-left));
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
    }

    .brand-back,
    .studio-tools {
        width: 100%;
        min-width: 0;
    }

    .brand-back {
        justify-content: space-between;
    }

    .studio-tools,
    .summary-controls {
        justify-content: flex-end;
    }

    .summary-wrap {
        width: 100%;
        min-width: 0;
    }

    .studio-wordmark,
    .studio-title {
        display: none;
    }

    .ghost-button,
    .theme-toggle,
    .summary,
    .price-summary-toggle {
        min-height: 36px;
    }

    .ghost-button {
        height: 36px;
        padding: 0 12px;
        font-size: 12px;
    }

    .theme-toggle {
        width: 36px;
        height: 36px;
        padding: 0;
        justify-content: center;
    }

    .theme-toggle span:last-child,
    .summary b {
        display: none;
    }

    .summary {
        padding: 0 10px;
        font-size: 11px;
    }

    .price-summary-toggle > span {
        padding: 0 10px;
        font-size: 11px;
    }

    .size-popover,
    .price-popover {
        right: 0;
        width: min(100%, 390px);
        max-height: calc(60dvh - 225px);
        overflow: auto;
    }

    .guide-toggle {
        top: 96px;
        left: max(10px, env(safe-area-inset-left));
        min-height: 32px;
        padding: 0 11px;
        font-size: 11px;
    }

    .user-guide {
        position: fixed;
        z-index: 30;
        top: max(8px, env(safe-area-inset-top));
        right: auto;
        bottom: max(8px, env(safe-area-inset-bottom));
        left: 50%;
        width: min(360px, calc(100% - 16px));
        max-width: none;
        height: auto;
        padding: 16px;
        overflow: auto;
        box-shadow: 0 0 0 100vmax rgba(25, 26, 24, 0.28), 0 22px 48px rgba(74, 58, 33, 0.2);
        transform: translate(-50%, 16px) scale(0.985);
    }

    .user-guide.is-open {
        transform: translateX(-50%);
    }

    .workbench {
        min-width: 0;
        padding: 94px 10px 126px;
    }

    .plate {
        width: clamp(190px, min(76vw, 32dvh), 320px);
        max-width: min(76vw, calc(60dvh - 225px), 320px);
    }

    .plate::before {
        --plate-visual-scale: min(var(--plate-visual-scale), 0.92);
    }

    .plate-logo {
        font-size: clamp(17px, 5vw, 24px);
    }

    .plate .empty-hint {
        top: calc(50% + 28px);
        width: 150px;
        font-size: 12px;
    }

    .actions {
        right: max(8px, env(safe-area-inset-right));
        bottom: max(8px, env(safe-area-inset-bottom));
        left: max(8px, env(safe-area-inset-left));
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr);
        grid-template-areas:
            "status status status"
            "tools import note"
            "share save finish";
        gap: 6px;
        align-items: stretch;
    }

    .status {
        grid-area: status;
        width: 100%;
        min-width: 0;
        max-width: none;
        height: 30px;
        margin: 0;
        padding: 0 10px;
        font-size: 11px;
    }

    .action-tool-group {
        grid-area: tools;
    }

    #importDesignButton {
        grid-area: import;
    }

    #shareDesignButton {
        grid-area: share;
    }

    #saveButton {
        grid-area: save;
    }

    #finishButton {
        grid-area: finish;
    }

    .natural-stone-note {
        grid-area: note;
        display: -webkit-box;
        min-width: 0;
        max-width: none;
        margin: 0;
        align-self: center;
        overflow: hidden;
        color: #756d62;
        font-size: 9px;
        line-height: 1.35;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .actions .icon-button,
    .actions .share-tool-button {
        height: 36px;
    }

    .actions .icon-button {
        width: 36px;
    }

    .actions .share-tool-button,
    .actions .primary-button,
    .actions .finish-button {
        min-width: 0;
        padding: 0 8px;
        font-size: 11px;
        white-space: nowrap;
    }

    .actions .primary-button,
    .actions .finish-button {
        width: 100%;
        height: 40px;
    }

    .catalog {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        width: 100%;
        min-width: 0;
        min-height: 0;
    }

    .category-filter {
        flex-direction: row;
        gap: 7px;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 8px 10px;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: 0;
        border-bottom: 1px solid rgba(25, 26, 24, 0.11);
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .category-filter::-webkit-scrollbar {
        display: none;
    }

    .category-filter-button {
        flex: 0 0 auto;
        min-height: 34px;
        padding: 0 14px;
        font-size: 12px;
        white-space: nowrap;
        scroll-snap-align: start;
    }

    .catalog-content {
        min-width: 0;
        min-height: 0;
    }

    .catalog-discovery {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "search tags"
            "summary summary";
        gap: 6px 8px;
        min-height: 0;
        padding: 8px 10px 7px;
    }

    .catalog-search {
        grid-area: search;
        min-width: 0;
        min-height: 38px;
    }

    .tag-filter-toggle {
        grid-area: tags;
        min-height: 38px;
        padding: 0 11px;
        white-space: nowrap;
    }

    .catalog-result-summary {
        grid-area: summary;
        min-height: 13px;
        text-align: left;
    }

    .active-tag-filters {
        padding: 6px 10px;
    }

    .tag-filter-panel {
        max-height: min(300px, 54dvh);
    }

    .tag-filter-panel > header {
        gap: 12px;
        padding: 14px 12px 10px;
    }

    .tag-filter-panel > header h2 {
        font-size: 21px;
    }

    .tag-filter-group {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 10px;
        padding: 10px 12px;
    }

    .tag-filter-disclaimer {
        padding: 11px 12px 13px;
    }

    .bead-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 10px max(10px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .bead-card {
        min-width: 0;
        min-height: 216px;
    }

    .bead-card-main {
        padding: 8px 5px 5px;
    }

    .bead-preview-frame {
        width: 84px;
        height: 84px;
    }

    .bead-name {
        padding: 0 5px;
        font-size: 14px;
    }

    .bead-size-options {
        width: calc(100% - 12px);
        max-width: none;
        margin-bottom: 9px;
    }

    .bead-size-button {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 3px;
        font-size: 11px;
    }

    .measurement-guide-card {
        width: calc(100% - 16px);
        height: calc(100% - 16px);
    }

    .design-code-dialog,
    .save-design-dialog {
        width: calc(100vw - 20px);
        min-width: 0;
        padding: 32px 20px 24px;
    }
}

@media (max-width: 360px) {
    .ghost-button {
        padding: 0 10px;
    }

    .summary,
    .price-summary-toggle > span {
        padding-right: 8px;
        padding-left: 8px;
    }

    .actions {
        grid-template-columns: auto 70px minmax(0, 1fr);
    }

    .actions .share-tool-button,
    .actions .primary-button,
    .actions .finish-button {
        padding-right: 5px;
        padding-left: 5px;
        font-size: 10px;
    }

    .bead-grid {
        gap: 6px;
        padding-right: 7px;
        padding-left: 7px;
    }
}

@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
    .designer-shell,
    .designer-shell.has-layout-resizer {
        grid-template-columns: minmax(0, 44%) minmax(0, 56%);
        grid-template-rows: minmax(0, 1fr);
    }

    .stage {
        grid-column: 1;
        grid-row: 1;
        border-right: 1px solid var(--line);
        border-bottom: 0;
    }

    .catalog {
        grid-column: 2;
        grid-row: 1;
    }

    .topbar {
        inset: max(6px, env(safe-area-inset-top)) 8px auto;
    }

    .guide-toggle {
        top: 88px;
    }

    .workbench {
        padding: 86px 8px 122px;
    }

    .plate {
        width: min(42vh, 32vw, 210px);
        max-width: min(42vh, 32vw, 210px);
    }

    .size-popover,
    .price-popover {
        max-height: calc(100dvh - 92px);
    }

    .tag-filter-panel {
        max-height: 68dvh;
    }
}