@media (max-width: 980px) {
    .workbench {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "canvas"
            "tour"
            "graph";
    }

    .graph-info-panel,
    .tour-panel {
        min-height: 0;
    }

    #visual-surface {
        min-height: clamp(420px, 58vh, 560px);
    }

    .zkp-guide {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 780px) {
    .app-shell {
        padding: var(--space-lg);
    }

    .topbar {
        align-items: stretch;
        flex-direction: column;
    }

    .toolbar {
        justify-content: flex-start;
    }

    .page-nav {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: thin;
    }

    .page-nav .secondary-action {
        flex: 1 0 auto;
        min-width: max-content;
    }

    .field,
    .field select,
    .graph-type-field,
    .graph-field {
        min-width: 0;
        width: 100%;
    }

    .instance-panel .field,
    .instance-panel .graph-type-field,
    .instance-panel .graph-field {
        flex: 1 1 100%;
        min-width: 0;
    }

    .panel.instance-panel {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        text-align: left;
    }

    .instance-controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .graph-picker-summary {
        align-items: stretch;
        flex-direction: column;
        gap: var(--control-gap);
    }

    .graph-picker-summary > .graph-picker-split {
        width: 100%;
    }

    .graph-picker-split-action {
        flex: 1 1 50%;
    }

    .canvas-title-row {
        align-items: stretch;
        flex-direction: column;
    }

    .canvas-title-row .graph-picker-summary {
        flex: 1 1 auto;
    }

    .canvas-title-row h2 {
        max-width: 100%;
    }

    .graph-picker-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .graph-picker-random {
        grid-template-columns: minmax(0, 1fr);
    }

    .instance-panel .panel-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .instance-panel .panel-actions > * {
        min-width: 0;
    }

    .upload-action {
        flex-wrap: wrap;
        align-items: stretch;
    }

    #visual-surface {
        min-height: clamp(340px, 48vh, 460px);
    }

    .primary-action,
    .secondary-action,
    .tool-button,
    .view-mode-toggle,
    .file-action,
    .upload-action,
    .download-link,
    .switch {
        flex: 1 1 auto;
    }

    .visual-actions > *,
    .download-row > * {
        min-width: 0;
    }

    .visual-actions .view-mode-toggle {
        flex: 1 1 220px;
        max-width: max-content;
    }

    .upload-action .file-action {
        flex: 1 1 auto;
    }

    .canvas-pills {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }

    .graph-metrics-overlay {
        max-width: none;
    }

    .canvas-tour-row .switch,
    .canvas-tour-row .tool-button,
    .animation-control-group {
        flex: 1 1 auto;
    }

    .animation-control-group {
        min-width: 0;
    }

    .canvas-tour-row .animation-action {
        flex: 1 1 auto;
    }

    .options-menu {
        flex: 1 1 auto;
    }

    .graph-more-options-row {
        padding: var(--space-md) var(--space-xl);
    }

    .options-menu > .secondary-action {
        width: 100%;
    }

    .options-panel {
        right: auto;
        left: 0;
        width: min(420px, calc(100vw - 28px));
    }

    .canvas-tour-row .animation-step {
        min-width: 0;
    }

    .tour-metrics div {
        min-width: 0;
    }
}

@media (max-width: 520px) {
    .app-shell {
        padding: var(--space-md);
        gap: var(--space-lg);
    }

    .workbench {
        gap: var(--space-lg);
    }

    .topbar,
    .panel,
    .canvas-header {
        padding: var(--space-xl);
    }

    h1 {
        font-size: var(--font-size-heading-mobile);
        line-height: var(--line-height-heading-mobile);
    }

    .topbar-subtitle {
        font-size: var(--font-size-subtitle-mobile);
        line-height: var(--line-height-label-mobile);
    }

    .brand-block {
        min-width: 0;
    }

    .primary-action,
    .secondary-action,
    .tool-button,
    .mode-button,
    .file-action,
    .download-link,
    .switch {
        height: auto;
        min-height: var(--control-height-mobile);
        padding: var(--space-md) var(--space-lg);
        white-space: normal;
        line-height: var(--line-height-control);
        text-align: center;
    }

    .view-mode-toggle {
        min-height: var(--control-height-mobile);
        height: auto;
        padding: 3px;
    }

    .mode-button {
        min-height: 30px;
        padding: var(--space-sm) var(--space-md);
    }

    .visual-actions,
    .download-row,
    .tour-controls,
    .canvas-pills,
    .toolbar {
        gap: var(--space-sm);
    }

    .upload-action {
        width: 100%;
    }

    .upload-action .file-action {
        flex: 1 1 142px;
    }

    .field select {
        min-width: 0;
    }

    .canvas-stage {
        overflow: visible;
    }

    #visual-surface {
        min-height: clamp(260px, 42vh, 360px);
    }

    .stat-grid,
    .haystack-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .stat-grid div {
        min-height: 62px;
    }

    .tour-metrics {
        max-width: calc(100% - 16px);
    }

    .tour-metrics div {
        min-width: 0;
    }

    .graph-metric-longest-path {
        right: 8px;
        bottom: 8px;
        padding: 5px 7px;
        gap: 5px;
    }

    .graph-metric-longest-path dt {
        font-size: 0.62rem;
        line-height: 1;
    }

    .graph-metric-longest-path dd {
        font-size: 0.78rem;
    }

    .sequence {
        font-size: var(--font-size-caption);
    }

    .app-dialog-backdrop {
        align-items: start;
        padding: var(--space-lg);
        overflow-y: auto;
    }

    .app-dialog {
        padding: var(--section-padding);
    }

    .app-dialog-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .zkp-code {
        max-width: 100%;
        font-size: var(--font-size-caption);
    }

    .zkp-lead,
    .zkp-section {
        padding: var(--section-padding);
        gap: var(--space-lg);
    }

    .zkp-lead {
        font-size: 0.92rem;
    }
}

@media (max-width: 380px) {
    .app-shell {
        padding: var(--space-sm);
    }

    .primary-action,
    .secondary-action,
    .tool-button,
    .mode-button,
    .file-action,
    .download-link,
    .switch {
        padding-inline: 8px;
        font-size: var(--font-size-caption);
    }

    #visual-surface {
        min-height: clamp(240px, 40vh, 330px);
    }

    .graph-metric-longest-path {
        right: 6px;
        bottom: 6px;
        padding: 4px 6px;
        max-width: calc(100% - 12px);
    }

    .graph-metric-longest-path dt {
        font-size: 0.58rem;
    }

    .graph-metric-longest-path dd {
        font-size: 0.72rem;
    }
}