/* Stage 072 hotfix — stable iPad toolbar layout.
   Keep the title row fixed and make only the command row scroll. */

@media (pointer: coarse) and (max-width: 1200px) {
    #topbar {
        display: block !important;
        position: fixed;
        height: 92px !important;
        min-height: 92px !important;
        padding: 4px 8px !important;
        overflow: hidden !important;
    }

    #topbar > .tb-btn.icon[href] {
        position: absolute;
        left: 8px;
        top: 8px;
        width: 44px;
        min-width: 44px;
        height: 30px;
        padding: 0;
    }

    #topbar > .tb-btn.icon[href]::after { display: none; }

    #topbar .tb-title {
        position: absolute;
        left: 60px;
        right: 8px;
        top: 8px;
        height: 30px;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #topbar .tb-sp { display: none !important; }

    #topbarActions {
        position: absolute;
        left: 8px;
        right: 8px;
        bottom: 4px;
        height: 44px;
        min-width: 0;
        display: flex !important;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 1px 1px 3px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    #topbarActions .tb-btn {
        flex: 0 0 auto;
        box-sizing: border-box;
        overflow: hidden;
    }

    #topbarActions .tb-btn:not(.icon) {
        width: 92px !important;
        min-width: 92px !important;
        height: 40px !important;
        padding: 3px 7px !important;
        display: inline-flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        font-size: 11px;
        line-height: 1.1;
        white-space: normal;
    }

    #topbarActions .tb-btn:not(.icon) > span {
        display: block !important;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #topbarActions .tb-btn.icon {
        width: 72px !important;
        min-width: 72px !important;
        height: 40px !important;
        padding: 3px 5px !important;
        display: inline-flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        line-height: 1;
    }

    #topbarActions .tb-btn.icon::after {
        content: attr(data-ui-label);
        display: block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
        font-size: 9px;
        line-height: 1;
        font-weight: 750;
        color: var(--sub);
    }

    #topbarActions .tb-scale { display: none !important; }
}

/* Keep panels usable without hiding half of the experiment bench. */
@media (pointer: coarse) and (max-width: 1200px) {
    .dk-sheet-mode .dk-panel {
        max-height: calc(100dvh - 110px) !important;
    }
}

/* Landscape iPad: use a compact right drawer so the 3D bench remains visible. */
@media (pointer: coarse) and (min-width: 851px) and (max-width: 1200px) and (orientation: landscape) {
    .dk-sheet-mode .dk-panel {
        left: auto !important;
        right: 12px !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + var(--dk-sheet-offset, 0px)) !important;
        width: min(420px, 42vw) !important;
        height: min(430px, calc(100dvh - 120px)) !important;
        max-height: calc(100dvh - 120px) !important;
        border-radius: 14px !important;
    }
}

/* Portrait iPad/phone: leave visible canvas margins on both sides. */
@media (pointer: coarse) and (max-width: 850px) {
    .dk-sheet-mode .dk-panel {
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        height: min(390px, 40dvh) !important;
        max-height: calc(100dvh - 110px) !important;
    }
}

.hazard-panel-intro {
    display: grid;
    gap: 10px;
    padding: 12px;
    color: var(--ink);
    line-height: 1.5;
}
.hazard-panel-intro h3 { font-size: 16px; }
.hazard-panel-intro p, .hazard-panel-intro li { font-size: 12px; }
.hazard-panel-intro ol { display: grid; gap: 7px; padding-left: 20px; }
.hazard-panel-boundary { padding: 9px; border: 1px solid #e2b0b0; border-radius: 8px; background: #fff3f3; color: #7c3030; font-weight: 700; }
.hazard-panel-hint { color: var(--sub); }
.panel-empty-state { display: grid; gap: 8px; padding: 14px; color: var(--sub); line-height: 1.5; font-size: 12px; }
.panel-empty-state h3, .panel-empty-state b { color: var(--ink); font-size: 14px; }