.builder-shell .topbar {
    align-items: center;
}

.builder-workbench {
    min-height: 0;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr) minmax(280px, 360px);
    grid-template-areas: "controls canvas json";
    gap: var(--shell-gap);
}

.builder-side-stack {
    grid-area: controls;
    display: grid;
    align-content: start;
    gap: var(--shell-gap);
    min-width: 0;
}

.builder-controls,
.builder-tour-panel {
    min-width: 0;
}

.builder-stage {
    grid-area: canvas;
    min-width: 0;
    min-height: min(720px, calc(100vh - 126px));
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.builder-json-panel {
    grid-area: json;
    min-width: 0;
    overflow: visible;
}

.builder-export-actions {
    display: grid;
    align-items: stretch;
    gap: var(--control-gap);
}

.builder-export-actions > .primary-action,
.builder-export-actions > .secondary-action {
    width: 100%;
}

.zkp-download-action .secondary-action,
.offline-download-action .secondary-action {
    flex: 1 1 auto;
}

.zkp-download-action,
.offline-download-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    flex: 1 1 220px;
    width: 100%;
}

.offline-download-help-text {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 20;
    width: min(330px, 100%);
    padding: var(--tooltip-padding);
    border: 1px solid var(--tooltip-border);
    border-radius: var(--radius-panel);
    color: var(--tooltip-text);
    background: var(--tooltip-bg);
    box-shadow: var(--panel-shadow);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-copy-strong);
    line-height: var(--tooltip-line-height);
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: var(--tooltip-transition);
}

.offline-download-help-text.viewport-tooltip,
.zkp-help-text.viewport-tooltip {
    position: fixed;
    left: 0;
    right: auto;
    top: 0;
    bottom: auto;
    z-index: 120;
    width: min(360px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
}

.offline-download-help-text.tooltip-open,
.zkp-help-text.tooltip-open {
    opacity: 1;
    transform: translateY(0);
}

#offline-download-help:hover + .offline-download-help-text,
#offline-download-help:focus-visible + .offline-download-help-text {
    opacity: 1;
    transform: translateY(0);
}

.solver-handoff-dialog {
    max-width: 520px;
}

.solver-handoff-criteria {
    display: grid;
    gap: var(--space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.solver-handoff-criteria li {
    border: 1px solid var(--warning-border-strong);
    border-radius: var(--radius-control);
    padding: var(--space-md) var(--space-lg);
    color: var(--warning-text);
    background: var(--warning-bg);
    font-size: var(--font-size-control-small);
    font-weight: var(--font-weight-copy-strong);
    line-height: var(--line-height-label);
}

.builder-toolbar {
    display: flex;
    align-items: end;
    gap: var(--control-gap);
    flex-wrap: wrap;
    min-width: 0;
}

.builder-layout-select {
    flex: 1 1 150px;
    min-width: 150px;
}

.builder-graph-actions {
    display: flex;
    align-items: stretch;
    gap: var(--control-gap);
    flex-wrap: wrap;
}

.builder-graph-actions .builder-file-action,
.builder-graph-actions .tool-button {
    flex: 1 1 140px;
    min-height: var(--control-height);
    justify-content: center;
}

.builder-canvas-title-row {
    min-width: 0;
    display: block;
}

.builder-canvas-title-block {
    min-width: 0;
}

.builder-canvas-title-block #builder-title {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.builder-canvas-info-row {
    min-width: 0;
}

.builder-canvas-actions {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--control-gap);
    flex-wrap: wrap;
    min-width: 0;
}

.builder-canvas-actions .tool-button {
    min-width: 0;
}

.builder-action-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--control-gap);
    flex: 1 1 260px;
    min-width: 0;
}

.builder-action-pair .tool-button {
    width: 100%;
    white-space: nowrap;
}

#delete-btn {
    flex: 0 1 120px;
    white-space: nowrap;
}

.builder-help-action {
    position: relative;
    display: inline-flex;
    justify-content: flex-end;
    flex: 0 0 auto;
    min-width: 0;
}

.builder-canvas-layout-row {
    display: grid;
    gap: var(--space-md);
    min-width: 0;
    padding: var(--space-lg) var(--space-3xl) var(--space-xl);
    border-top: 1px solid var(--panel-border);
    background: var(--panel-soft-bg);
}

.builder-canvas-layout-row .builder-toolbar {
    align-items: stretch;
}

.edge-help-text {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 20;
    width: min(260px, 80vw);
    padding: var(--tooltip-padding);
    border: 1px solid var(--tooltip-border);
    border-radius: var(--radius-control);
    color: var(--tooltip-text);
    background: var(--tooltip-bg);
    box-shadow: var(--panel-shadow);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-copy-strong);
    line-height: var(--tooltip-line-height);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: var(--tooltip-transition);
}

#edge-help:hover + .edge-help-text,
#edge-help:focus-visible + .edge-help-text {
    opacity: 1;
    transform: translateY(0);
}

.builder-control-group {
    display: grid;
    gap: var(--space-lg);
    padding: 0 0 var(--section-padding);
    border-bottom: 1px solid var(--line);
}

.builder-control-group:last-of-type {
    padding-bottom: 0;
    border-bottom: 0;
}

.builder-control-group .eyebrow {
    margin-bottom: -2px;
}

.builder-file-action {
    width: fit-content;
}

.builder-controls input,
.builder-controls select,
.builder-tour-panel textarea {
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-control);
    color: var(--text);
    background: var(--control-bg);
}

.builder-controls input,
.builder-controls select {
    height: var(--control-height);
    padding: 0 var(--space-control-compact-x);
}

.builder-tour-panel textarea {
    width: 100%;
    min-height: 74px;
    padding: var(--space-lg) var(--space-lg);
    resize: vertical;
    font-family: var(--font-mono);
    font-size: var(--font-size-control-small);
    line-height: var(--line-height-copy);
}

.builder-tour-panel textarea.tour-input-error {
    color: var(--danger-text);
    border-color: var(--danger-border-strong);
    background: var(--danger-bg);
}

.compact-field {
    flex: 0 0 96px;
}

.compact-field input,
.compact-field select {
    width: 100%;
}

#edge-mode-btn.active {
    color: var(--on-primary);
    background: var(--primary);
    border-color: var(--primary);
}

#random-cycle-btn {
    color: var(--success-text);
    background: var(--success-bg-soft);
    border-color: var(--success-border);
}

.builder-hc-toolbar #random-cycle-btn {
    flex: 1 1 100%;
}

.danger-tool {
    color: var(--danger-text);
    background: var(--danger-bg);
    border-color: var(--danger-border);
}

.tour-preview-section {
    display: grid;
    gap: var(--control-gap);
}

.builder-controls .status-message.error {
    padding: var(--space-lg) var(--space-lg);
    border: 2px solid var(--danger-border-prominent);
    border-radius: var(--radius-control);
    background: var(--danger-bg);
}

.zkp-help-text {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 20;
    width: min(360px, 100%);
    padding: var(--tooltip-padding);
    border: 1px solid var(--tooltip-border);
    border-radius: var(--radius-control);
    color: var(--tooltip-text);
    background: var(--tooltip-bg);
    box-shadow: var(--panel-shadow);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-copy-strong);
    line-height: var(--tooltip-line-height);
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: var(--tooltip-transition);
}

#zkp-download-help:hover + .zkp-help-text,
#zkp-download-help:focus-visible + .zkp-help-text {
    opacity: 1;
    transform: translateY(0);
}

.json-preview-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--control-gap);
    margin-top: 10px;
}

.json-preview-controls[hidden] {
    display: none;
}

.json-preview-controls .tool-button {
    flex: 0 0 auto;
}

.json-preview-range {
    min-width: 0;
    color: var(--muted);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-control);
    text-align: center;
}

.zkp-service-prompt {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 80;
    width: min(420px, calc(100vw - 36px));
    display: flex;
    align-items: center;
    gap: var(--cluster-gap);
    padding: var(--section-padding);
    border: 2px solid var(--danger-border-prominent);
    border-radius: var(--radius-panel);
    background: var(--danger-prompt-bg);
    box-shadow: var(--panel-shadow);
}

.zkp-service-prompt[hidden] {
    display: none;
}

.zkp-service-prompt p {
    margin: 0;
}

.zkp-service-prompt .secondary-action {
    flex: 0 0 auto;
    color: var(--text);
    background: var(--control-muted-bg);
    border-color: var(--control-border);
    box-shadow: none;
}

.zkp-service-prompt .secondary-action:hover {
    background: var(--control-muted-bg-hover);
    border-color: var(--control-border-hover);
}

.zkp-request-indicator {
    position: fixed;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: var(--control-gap);
    pointer-events: none;
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-panel);
    color: var(--text);
    background: var(--info-surface-bg);
    box-shadow: var(--panel-shadow);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-control);
    white-space: nowrap;
}

.zkp-request-indicator[hidden] {
    display: none;
}

.zkp-request-spinner {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    border: 2px solid var(--info-border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: zkp-request-spin 800ms linear infinite;
}

@keyframes zkp-request-spin {
    to {
        transform: rotate(360deg);
    }
}

.tour-preview-summary {
    min-height: var(--control-height-compact);
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-control);
    padding: 0 var(--space-control-compact-x);
    color: var(--success-text);
    background: var(--success-bg);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-control);
}

.tour-preview-summary.empty {
    color: var(--muted);
    background: var(--panel-soft-bg);
    border-color: var(--panel-border);
}

.tour-preview-summary.error {
    color: var(--danger-text);
    background: var(--danger-pill-bg);
    border-color: var(--danger-border);
}

#builder-cy {
    min-height: clamp(420px, calc(100vh - 226px), 760px);
    height: 100%;
    min-width: 0;
    background:
        linear-gradient(var(--canvas-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--canvas-grid-line) 1px, transparent 1px),
        var(--canvas-grid-bg);
    background-size: var(--canvas-grid-size) var(--canvas-grid-size);
}

.builder-json-output {
    min-height: 360px;
    max-height: 58vh;
    margin: 0;
    overflow: auto;
    border: 1px solid var(--code-dark-border);
    border-radius: var(--radius-panel);
    padding: var(--cluster-gap);
    color: var(--code-dark-text);
    background: var(--code-dark-bg);
    box-shadow: var(--code-dark-highlight);
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-copy);
    white-space: pre;
    tab-size: 2;
}

.builder-json-output .json-key {
    color: var(--syntax-key);
}

.builder-json-output .json-string {
    color: var(--syntax-string);
}

.builder-json-output .json-number {
    color: var(--syntax-number);
}

.builder-json-output .json-literal {
    color: var(--syntax-literal);
}

.builder-validation {
    display: grid;
    gap: var(--control-gap);
}

.builder-validation p {
    margin: 0;
    padding: var(--space-lg) var(--space-lg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-control);
    color: var(--muted);
    background: var(--panel-soft-bg);
    font-size: var(--font-size-small);
    line-height: var(--line-height-label);
}

.builder-validation p.error {
    color: var(--danger-text);
    background: var(--danger-pill-bg);
    border-color: var(--danger-border);
}

.builder-validation p.warning {
    color: var(--warning-pill-text);
    background: var(--warning-pill-bg);
    border-color: var(--warning-border);
}

@media (max-width: 1180px) {
    .builder-workbench {
        grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
        grid-template-areas:
            "controls canvas"
            "json canvas";
    }
}

@media (max-width: 860px) {
    .builder-workbench {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "canvas"
            "controls"
            "json";
    }

    #builder-cy {
        min-height: clamp(320px, 48vh, 500px);
    }
}

@media (max-width: 520px) {
    .builder-shell .topbar {
        align-items: stretch;
    }

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

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

    .builder-toolbar,
    .builder-canvas-actions,
    .builder-graph-actions,
    .builder-export-actions,
    .json-preview-controls {
        gap: var(--space-sm);
    }

    .builder-toolbar > *,
    .builder-canvas-actions > *,
    .builder-graph-actions > *,
    .builder-export-actions > *,
    .json-preview-controls > * {
        min-width: 0;
    }

    .builder-toolbar .tool-button,
    .builder-canvas-actions .tool-button,
    .builder-toolbar .field,
    .builder-graph-actions .builder-file-action,
    .builder-graph-actions .tool-button {
        flex: 1 1 132px;
    }

    .builder-action-pair {
        flex: 1 1 100%;
    }

    #delete-btn {
        flex: 1 1 calc(100% - 42px);
    }

    .builder-help-action {
        align-items: center;
    }

    .builder-layout-select {
        flex: 1 1 100%;
        min-width: 0;
        width: 100%;
    }

    .compact-field {
        flex: 1 1 96px;
        min-width: 0;
    }

    .tour-preview-summary {
        width: 100%;
        min-height: 36px;
        padding-block: var(--space-md);
        line-height: var(--line-height-heading);
    }

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

    .builder-json-output {
        min-height: 150px;
        max-height: 30vh;
        font-size: var(--font-size-caption);
    }

    .builder-validation {
        gap: var(--space-sm);
    }

    .builder-validation p {
        padding: var(--space-md) var(--space-lg);
        font-size: var(--font-size-caption);
    }

    .zkp-download-action,
    .offline-download-action {
        flex: 1 1 100%;
        min-width: 0;
    }

    .zkp-download-action .secondary-action,
    .offline-download-action .secondary-action {
        min-width: 0;
    }

    .zkp-service-prompt {
        left: 10px;
        right: 10px;
        bottom: 10px;
        width: auto;
        align-items: stretch;
        flex-direction: column;
        gap: var(--space-lg);
    }

    .zkp-service-prompt .secondary-action {
        width: 100%;
    }

    .zkp-request-indicator {
        max-width: calc(100vw - 20px);
        white-space: normal;
        line-height: var(--line-height-heading);
    }

    .app-dialog-grid .field {
        min-width: 0;
    }
}

@media (max-width: 380px) {
    #builder-cy {
        min-height: clamp(240px, 40vh, 330px);
    }

    .builder-control-group {
        gap: var(--space-md);
        padding-bottom: var(--space-lg);
    }
}