/* Isolated native layout editor; the core owns validation and project commit. */

[data-native-preview-mount][hidden],
.wardrobe-native-preview [hidden] {
    display: none !important;
}

#wardrobe-builder[data-native-preview-active="true"] .wardrobe-builder__controls > :not([data-native-preview-mount]) {
    display: none !important;
}

#wardrobe-builder[data-native-preview-active="true"] [data-native-preview-mount] {
    display: block;
    min-width: 0;
}

/* Exact graph plan rendered in the existing 2D workspace. These selectors
 * are active only while the disposable sidecar session is open. */
#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wardrobe-builder__canvas {
    background: #fbfcfc;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-plan__background {
    fill: #fbfcfc;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-plan__grid-line {
    fill: none;
    stroke: #e7ebed;
    stroke-width: 1;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-plan__run,
#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-plan__joint,
#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-plan__terminal,
#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-plan__bay {
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
    cursor: pointer;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) [data-native-entity-kind]:focus-visible {
    outline: none;
    stroke: #c99400;
    stroke-width: 3;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-plan__run {
    fill: #eeeae1;
    stroke: #40515b;
    stroke-width: 2;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-plan__joint {
    fill: #fff1b8;
    stroke: #c99400;
    stroke-width: 2;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-plan__terminal {
    fill: #e5f0f2;
    stroke: #57747f;
    stroke-width: 2;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-plan__bay {
    fill: rgba(255, 255, 255, .08);
    stroke: rgba(64, 81, 91, .28);
    stroke-width: 1;
    stroke-dasharray: 4 3;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-plan__bay.is-selected {
    fill: rgba(255, 194, 15, .16);
    stroke: #c99400;
    stroke-width: 2;
    stroke-dasharray: none;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-plan__opening {
    fill: none;
    stroke: #263744;
    stroke-width: 4;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    cursor: pointer;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-plan__opening.is-open {
    stroke: #72a27b;
    stroke-dasharray: 7 4;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-plan__opening.is-sliding {
    stroke: #287fb7;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-plan__title {
    fill: #263744;
    font-size: 18px;
    font-weight: 700;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-plan__subtitle {
    fill: #74808a;
    font-size: 12px;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-plan__dimension {
    fill: #34454e;
    font-size: 11px;
    font-weight: 650;
    paint-order: stroke;
    stroke: #fbfcfc;
    stroke-width: 4px;
    stroke-linejoin: round;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-plan__angle {
    fill: #7b5b00;
    font-size: 10px;
    font-weight: 700;
    paint-order: stroke;
    stroke: #fff7d8;
    stroke-width: 3px;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-plan__error {
    fill: #8a4139;
    font-size: 15px;
    font-weight: 600;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-elevation__background {
    fill: #fbfcfc;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-elevation__face {
    cursor: pointer;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-elevation__case {
    stroke: #34434d;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-elevation__interior {
    fill: #faf9f4;
    stroke: #aeb7bb;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-elevation__divider,
#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-elevation__drawer,
#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-elevation__drawer-anchor {
    fill: #f0f1ee;
    stroke: #59666e;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-elevation__rail {
    fill: none;
    stroke: #263744;
    stroke-width: 4;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-elevation__equipment {
    fill: none;
    stroke: #546772;
    stroke-width: 3;
    stroke-dasharray: 7 3;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-elevation__terminal-shelf {
    fill: none;
    stroke: #59666e;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-elevation__facade {
    stroke: #34434d;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-elevation__glass {
    fill: rgba(163, 205, 217, .58);
    stroke: rgba(74, 112, 123, .55);
    stroke-width: 1;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-elevation__mirror-band {
    stroke: rgba(74, 112, 123, .55);
    stroke-width: 1;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-elevation__handle,
#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-elevation__slide {
    fill: none;
    stroke: #263744;
    stroke-width: 2.5;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-elevation__slide {
    stroke-dasharray: 5 3;
}

#wardrobe-builder:is([data-native-preview-active="true"],[data-native-model="true"]) .wb-native-elevation__label {
    fill: #59666e;
    font-size: 10px;
    font-weight: 650;
    pointer-events: none;
}

.wardrobe-native-preview {
    container: wardrobe-native-preview / inline-size;
    width: 100%;
    min-width: 0;
    margin: 0;
    border: 0;
    background: var(--wb-white, #fff);
    color: var(--wb-ink, #263744);
    box-shadow: none;
}

.wardrobe-native-preview *,
.wardrobe-native-preview *::before,
.wardrobe-native-preview *::after {
    box-sizing: border-box;
}

.wardrobe-native-preview__idle {
    padding: 18px;
}

.wardrobe-native-preview__eyebrow {
    display: block;
    color: #8a6900;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .065em;
    line-height: 1.3;
    text-transform: uppercase;
}

.wardrobe-native-preview h3,
.wardrobe-native-preview h4,
.wardrobe-native-preview p {
    margin-top: 0;
}

.wardrobe-native-preview__idle h3,
.wardrobe-native-preview__title h3 {
    margin: 4px 0 6px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
}

.wardrobe-native-preview__idle > p {
    max-width: 620px;
    margin-bottom: 13px;
    color: var(--wb-muted, #74808a);
    font-size: 12px;
    line-height: 1.5;
}

.wardrobe-native-preview__idle > small {
    display: block;
    margin-top: 9px;
    color: var(--wb-muted, #74808a);
    font-size: 10px;
    line-height: 1.4;
}

.wardrobe-native-preview button,
.wardrobe-native-preview input,
.wardrobe-native-preview select {
    font: inherit;
}

.wardrobe-native-preview button {
    min-height: 38px;
    border: 1px solid #cdd4d8;
    border-radius: 3px;
    background: #fff;
    color: var(--wb-ink, #263744);
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.wardrobe-native-preview button:hover:not(:disabled) {
    border-color: #aeb8bd;
    background: #f4f6f6;
}

.wardrobe-native-preview button:focus-visible,
.wardrobe-native-preview input:focus-visible,
.wardrobe-native-preview select:focus-visible {
    outline: 2px solid var(--wb-accent, #ffc20f);
    outline-offset: 2px;
}

.wardrobe-native-preview button:disabled,
.wardrobe-native-preview input:disabled,
.wardrobe-native-preview select:disabled {
    cursor: not-allowed;
    opacity: .53;
}

.wardrobe-native-preview__primary,
.wardrobe-native-preview__apply {
    padding: 8px 14px;
    border-color: #dfaa00 !important;
    background: var(--wb-accent, #ffc20f) !important;
    color: #27343c !important;
    font-weight: 700;
}

.wardrobe-native-preview__primary:hover:not(:disabled),
.wardrobe-native-preview__apply:hover:not(:disabled) {
    background: var(--wb-accent-hover, #efb400) !important;
}

.wardrobe-native-preview__active {
    padding-bottom: 16px;
}

.wardrobe-native-preview__safety {
    margin: 0 !important;
    padding: 9px 15px;
    border-bottom: 1px solid #ead491;
    background: #fff9df;
    color: #66520f;
    font-size: 10px;
    line-height: 1.4;
}

.wardrobe-native-preview__disclaimer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px 11px;
    padding: 11px 15px;
    border-bottom: 1px solid #ead491;
    background: #fff9df;
    color: #5f4c0d;
    font-size: 11px;
    line-height: 1.45;
}

.wardrobe-native-preview__disclaimer strong {
    font-weight: 700;
}

.wardrobe-native-preview__head {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 18px;
    padding: 15px;
    border-bottom: 1px solid var(--wb-line, #dfe4e7);
}

.wardrobe-native-preview__title {
    min-width: 0;
}

.wardrobe-native-preview__title h3 {
    overflow: hidden;
    margin-bottom: 3px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wardrobe-native-preview__title > small {
    color: #5e7163;
    font-size: 10px;
}

.wardrobe-native-preview__title > small.is-dirty {
    color: #8b6500;
    font-weight: 700;
}

.wardrobe-native-preview__history {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.wardrobe-native-preview__history button {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 11px;
}

.wardrobe-native-preview__history [data-native-preview-commit] {
    grid-column: 1 / -1;
}

.wardrobe-native-preview__history .wardrobe-native-preview__close {
    grid-column: 1 / -1;
    border-color: #d8b9b5;
    color: #834a43;
}

.wardrobe-native-preview__history .wardrobe-native-preview__close:hover:not(:disabled) {
    border-color: #c99b95;
    background: #fff4f2;
    color: #703a34;
}

.wardrobe-native-preview__issue {
    margin: 12px 15px 0 !important;
    padding: 9px 11px;
    border: 1px solid #e2c5c1;
    background: #fff6f4;
    color: #873f37 !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
}

.wardrobe-native-preview__idle .wardrobe-native-preview__issue {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.wardrobe-native-preview__editors {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 12px 15px 0;
}

.wardrobe-native-preview__navigator {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--wb-line, #dfe4e7);
}

.wardrobe-native-preview__editor {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 13px;
    border: 1px solid var(--wb-line, #dfe4e7);
    background: #fafbfb;
}

.wardrobe-native-preview__editor--topology {
    grid-column: 1 / -1;
}

.wardrobe-native-preview__editor-head {
    display: grid;
    grid-template-columns: 1fr;
    align-items: end;
    gap: 10px;
    margin-bottom: 12px;
}

.wardrobe-native-preview__editor-head > div > span {
    color: var(--wb-muted, #74808a);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.wardrobe-native-preview__editor-head > small {
    color: var(--wb-muted, #74808a);
    font-size: 9.5px;
    line-height: 1.4;
}

.wardrobe-native-preview__editor h4 {
    margin: 3px 0 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.wardrobe-native-preview label {
    display: block;
    min-width: 0;
}

.wardrobe-native-preview label > span {
    display: block;
    margin-bottom: 5px;
    color: #5b6870;
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.3;
}

.wardrobe-native-preview label > small {
    display: block;
    margin-top: 5px;
    color: var(--wb-muted, #74808a);
    font-size: 9px;
    line-height: 1.4;
}

.wardrobe-native-preview input,
.wardrobe-native-preview select {
    width: 100%;
    min-width: 0;
    height: 39px;
    padding: 7px 9px;
    border: 1px solid #ccd4d8;
    border-radius: 2px;
    background: #fff;
    color: var(--wb-ink, #263744);
    font-size: 11px;
}

.wardrobe-native-preview input[readonly] {
    background: #f0f2f2;
    color: #66737a;
}

.wardrobe-native-preview__fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.wardrobe-native-preview__field--wide {
    grid-column: auto;
}

.wardrobe-native-preview__equipment-levels {
    padding-top: 10px;
    border-top: 1px solid var(--wb-line, #dfe4e7);
}

.wardrobe-native-preview__equipment-levels-head {
    display: flex;
    flex-direction: column;
    margin-bottom: 9px;
    gap: 3px;
}

.wardrobe-native-preview__equipment-levels-head strong {
    color: var(--wb-ink, #263744);
    font-size: 11px;
}

.wardrobe-native-preview__equipment-levels-head small {
    color: var(--wb-muted, #74808a);
    font-size: 9px;
    line-height: 1.4;
}

.wardrobe-native-preview__equipment-levels-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.wardrobe-native-preview__topology-order {
    display: flex;
    width: 100%;
    min-width: 0;
    margin: 0 0 12px;
    padding: 3px 1px 8px;
    gap: 6px;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: thin;
}

.wardrobe-native-preview__topology-order li {
    flex: 0 0 auto;
    max-width: min(310px, 78vw);
    padding: 7px 9px;
    overflow: hidden;
    border: 1px solid #d8dfe2;
    border-radius: 3px;
    background: #fff;
    color: #45555e;
    font-size: 9.5px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wardrobe-native-preview__topology-order .wardrobe-native-preview__topology-joint {
    border-color: #ead491;
    background: #fff9df;
    color: #70570b;
}

.wardrobe-native-preview__hint {
    margin: 10px 0 0 !important;
    color: var(--wb-muted, #74808a);
    font-size: 9px;
    line-height: 1.45;
}

.wardrobe-native-preview__hint strong {
    color: #52616a;
}

.wardrobe-native-preview__topology-remove {
    padding-top: 11px;
    border-top: 1px solid var(--wb-line, #dfe4e7);
}

.wardrobe-native-preview__apply {
    width: 100%;
    align-self: stretch;
    margin-top: 12px;
}

.wardrobe-native-preview__actions {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 12px;
}

.wardrobe-native-preview__actions .wardrobe-native-preview__apply {
    margin-top: 0;
}

.wardrobe-native-preview__remove {
    width: 100%;
    padding: 8px 14px;
    border-color: #d8b9b5 !important;
    background: #fff !important;
    color: #834a43 !important;
    font-weight: 650;
}

.wardrobe-native-preview__remove:hover:not(:disabled) {
    border-color: #c99b95 !important;
    background: #fff4f2 !important;
    color: #703a34 !important;
}

.wardrobe-native-preview.is-pending .wardrobe-native-preview__active,
.wardrobe-native-preview.is-pending .wardrobe-native-preview__idle {
    cursor: progress;
}

@container wardrobe-native-preview (min-width: 520px) {
    .wardrobe-native-preview__disclaimer {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .wardrobe-native-preview__head {
        flex-direction: row;
    }

    .wardrobe-native-preview__history {
        display: flex;
        width: auto;
        flex: 0 0 auto;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .wardrobe-native-preview__history button {
        flex: 0 0 auto;
    }

    .wardrobe-native-preview__history .wardrobe-native-preview__close {
        grid-column: auto;
    }

    .wardrobe-native-preview__history [data-native-preview-commit] {
        grid-column: auto;
    }

    .wardrobe-native-preview__editor-head {
        grid-template-columns: minmax(0, 1fr) minmax(130px, .85fr);
    }

    .wardrobe-native-preview__navigator {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wardrobe-native-preview__fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wardrobe-native-preview__field--wide {
        grid-column: 1 / -1;
    }

    .wardrobe-native-preview__equipment-levels-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wardrobe-native-preview__apply {
        width: auto;
        align-self: flex-end;
    }

    .wardrobe-native-preview__actions {
        flex-direction: row;
        align-items: stretch;
        justify-content: flex-end;
    }

    .wardrobe-native-preview__actions .wardrobe-native-preview__apply,
    .wardrobe-native-preview__actions .wardrobe-native-preview__remove {
        width: auto;
        align-self: stretch;
    }
}

@media (max-width: 430px) {
    .wardrobe-native-preview__idle,
    .wardrobe-native-preview__head {
        padding-right: 12px;
        padding-left: 12px;
    }

    .wardrobe-native-preview__editors {
        padding-right: 12px;
        padding-left: 12px;
    }

}

@media (max-width: 900px) {
    #wardrobe-builder[data-native-preview-active="true"] {
        padding-bottom: 0;
    }

    #wardrobe-builder[data-native-preview-active="true"] .wardrobe-builder__steps,
    #wardrobe-builder[data-native-preview-active="true"] .wardrobe-builder__mobile-actions,
    #wardrobe-builder[data-native-preview-active="true"] .wardrobe-builder__templates {
        display: none;
    }

    #wardrobe-builder[data-native-preview-active="true"] .wardrobe-builder__layout {
        display: flex;
        flex-direction: column;
    }

    #wardrobe-builder[data-native-preview-active="true"] .wardrobe-builder__stage,
    #wardrobe-builder[data-native-preview-active="true"] .wardrobe-builder__controls {
        display: flex;
    }

    #wardrobe-builder[data-native-preview-active="true"] .wardrobe-builder__controls {
        min-height: 0;
    }

    #wardrobe-builder[data-native-preview-active="true"] .wardrobe-builder__sidebar {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wardrobe-native-preview button {
        transition: none;
    }
}