/* Shared application shell for Decal Builder and Livery Lab. */
.decal-builder-page,
.livery-builder-page { overflow: hidden; background: #090a0d; }
.decal-builder-page .site-header,
.livery-builder-page .site-header,
.decal-builder-page .site-footer,
.livery-builder-page .site-footer,
.decal-builder-page .site-motion-rail,
.livery-builder-page .site-motion-rail,
.decal-builder-page .quick-request-widget,
.livery-builder-page .quick-request-widget,
.decal-builder-page .ambient-crystal-field,
.livery-builder-page .ambient-crystal-field { display: none !important; }
.decal-builder-page #content,
.livery-builder-page #content { height: 100dvh; min-height: 0; padding: 0 !important; overflow: hidden; }
.decal-builder-page .flash-stack,
.livery-builder-page .flash-stack { position: fixed; z-index: 120; top: 12px; left: 50%; width: min(520px, calc(100% - 24px)); transform: translateX(-50%); }

.builder-app {
    --app-rail: 82px;
    --app-inspector: clamp(278px, 20vw, 334px);
    width: 100% !important;
    position: relative;
    max-width: none !important;
    height: 100dvh;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: #090a0d;
}
.builder-app[hidden], .builder-app [hidden] { display: none !important; }

.decal-builder.builder-app {
    display: grid;
    grid-template-columns: var(--app-rail) minmax(0, 1fr) var(--app-inspector);
    grid-template-areas: "rail stage inspector";
    align-items: stretch;
    gap: 1px;
}
.livery-builder.builder-app {
    display: grid;
    grid-template-columns: var(--app-rail) minmax(0, 1fr) var(--app-inspector);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "rail bar bar" "rail stage inspector";
    align-items: stretch;
    gap: 1px;
}

.builder-app-rail {
    position: relative;
    z-index: 20;
    grid-area: rail;
    min-width: 0;
    height: 100%;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    border-right: 1px solid #272930;
    background: #0d0f14;
    color: #d9dbe2;
    box-shadow: 10px 0 30px rgba(0, 0, 0, .22);
}
.builder-app-brand {
    min-height: 76px;
    display: grid;
    place-items: center;
    gap: 2px;
    border: 1px solid transparent;
}
.builder-app-brand:hover { border-color: #3a3c44; background: #13161d; }
.builder-app-brand img { width: 46px; height: 46px; object-fit: contain; }
.builder-app-brand > span { display: flex; align-items: baseline; gap: 4px; font-size: .52rem; letter-spacing: .1em; }
.builder-app-brand small { color: var(--accent); font-size: .43rem; font-weight: 900; }
.builder-app-modes,
.builder-app-tools { display: grid; gap: 6px; }
.builder-app-modes { padding: 8px 0 12px; border-block: 1px solid #272930; }
.builder-app-tools { min-height: 0; overflow-y: auto; scrollbar-width: none; }
.builder-app-tools::-webkit-scrollbar { display: none; }
.builder-app-rail a,
.builder-app-rail button,
.builder-app-mobile-dock button {
    min-width: 0;
    min-height: 62px;
    padding: 7px 3px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
    border: 1px solid #2b2e36;
    background: transparent;
    color: #969aa4;
    cursor: pointer;
    font-size: .46rem;
    font-weight: 850;
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
    transition: border-color .16s, background .16s, color .16s, transform .16s;
}
.builder-app-rail a:hover,
.builder-app-rail button:hover,
.builder-app-rail .is-active,
.builder-app-mobile-dock button:hover,
.builder-app-mobile-dock .is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, #11141a); color: #fff; }
.builder-app-rail .is-active { box-shadow: inset 3px 0 var(--accent); }
.builder-app-rail button:disabled,
.builder-app-mobile-dock button:disabled { opacity: .28; cursor: not-allowed; }
.builder-app-rail svg,
.builder-app-mobile-dock svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.builder-app-projects { margin-top: auto; }
.builder-app-mobile-dock { display: none; }

/* The old side libraries become focused pickers. */
.builder-app-library {
    position: fixed !important;
    inset: 7dvh auto auto 50% !important;
    z-index: 110;
    width: min(720px, calc(100vw - 36px)) !important;
    height: min(86dvh, 850px) !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateX(-50%);
    overflow: hidden !important;
    border: 1px solid #454851 !important;
    background: #111319 !important;
    color: var(--text);
    box-shadow: 0 35px 120px rgba(0, 0, 0, .72);
}
.builder-app-library:not([open]) { display: none !important; }
.builder-app-library[open] { display: flex !important; flex-direction: column; }
.builder-app-library::backdrop { background: rgba(2, 3, 5, .78); backdrop-filter: blur(7px); }
.builder-app-library > header,
.builder-app-library > .builder-panel__head {
    flex: 0 0 auto;
    min-height: 76px;
    padding: 13px 16px 13px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid #31343c;
    background: #151820;
}
.builder-app-library > header > div,
.builder-app-library > .builder-panel__head > div { display: grid; gap: 5px; }
.builder-app-library > header strong,
.builder-app-library > .builder-panel__head strong { font-size: 1.28rem; }
.builder-app-library [data-app-library-close],
.builder-inspector [data-app-inspector-close],
.livery-inspector [data-app-inspector-close] {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid #3b3e47;
    background: #0d0f14;
    color: #dddfe5;
    cursor: pointer;
    font-size: 1.35rem;
}
.builder-app-library [data-app-library-close]:hover,
.builder-inspector [data-app-inspector-close]:hover,
.livery-inspector [data-app-inspector-close]:hover { border-color: var(--accent); color: var(--accent); }
.builder-app-library .builder-library__modes,
.builder-app-library .livery-library__modes { flex: 0 0 auto; padding: 10px 12px 0; gap: 6px; background: transparent; }
.builder-app-library .builder-library__filters,
.builder-app-library .livery-library__filters { flex: 0 0 auto; padding: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.builder-app-library .builder-library__filters [data-vehicle-filters] { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.builder-app-library .builder-library__filters > label:last-child { align-self: end; }
.builder-app-library .builder-asset-grid {
    min-height: 0;
    max-height: none;
    padding: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    overflow-y: auto;
}
.builder-app-library .livery-asset-grid {
    min-height: 0;
    max-height: none;
    padding: 10px 12px 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 8px;
    overflow-y: auto;
}
.builder-app-library [data-library-content]:not([hidden]) {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.builder-app-library .livery-asset-card { min-height: 88px; border: 1px solid var(--line); }
.builder-app-library .livery-library__empty,
.builder-app-library .builder-empty { flex: 0 0 auto; }
.builder-app-library .builder-livery-queue { flex: 0 0 auto; max-height: min(42vh, 358px); overflow: hidden; }

/* Central work areas fill the viewport instead of producing a long web page. */
.decal-builder.builder-app > .builder-workspace {
    grid-area: stage;
    min-width: 0;
    min-height: 0;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    background: #0b0d12;
}
.decal-builder.builder-app > .builder-inspector {
    grid-area: inspector;
    min-height: 0;
    height: 100dvh;
    position: static;
    max-height: none;
    overflow-y: auto;
    border: 0;
    background: #101218;
    transition: opacity .18s ease, visibility .18s ease;
}
.decal-builder.builder-app .builder-projectbar,
.livery-builder.builder-app .livery-projectbar {
    flex: 0 0 auto;
    min-height: 64px;
    padding: 9px 13px;
    border: 0;
    border-bottom: 1px solid #2b2e36;
    background: #111319;
}
.decal-builder.builder-app .builder-toolbar,
.livery-builder.builder-app .livery-toolbar {
    flex: 0 0 auto;
    min-height: 54px;
    padding: 7px 10px;
    gap: 6px;
    border-bottom: 1px solid #2b2e36;
    background: #0f1117;
}
.decal-builder.builder-app .builder-canvas-shell {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding: 24px;
    background: radial-gradient(circle at 50% 40%, rgba(255,77,46,.055), transparent 42%), #080a0e;
}
.decal-builder.builder-app .builder-statusbar { flex: 0 0 auto; min-height: 42px; background: #111319; }

.livery-builder.builder-app > .livery-projectbar { grid-area: bar; }
.livery-builder.builder-app > .livery-stage-panel {
    grid-area: stage;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    background: #0b0d12;
}
.livery-builder.builder-app > .livery-inspector {
    grid-area: inspector;
    min-width: 0;
    min-height: 0;
    align-self: stretch;
    overflow-y: auto;
    border: 0;
    background: #101218;
    transition: opacity .18s ease, visibility .18s ease;
}
.livery-builder.builder-app .livery-canvas-shell {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 42%, rgba(255,77,46,.055), transparent 42%), #080a0e;
}
.livery-builder.builder-app .livery-stage-workspace { min-height: 100%; }
.livery-builder.builder-app .livery-stage-workspace.is-grid { align-content: center; }
.livery-builder.builder-app .livery-stage-workspace.is-focus,
.livery-builder.builder-app .livery-stage-workspace.is-focus .livery-view-card { height: 100%; }
.livery-builder.builder-app .livery-stage-workspace.is-focus .livery-view-card {
    min-height: 0;
    align-self: stretch;
    grid-template-rows: 42px minmax(0, 1fr);
    overflow: hidden;
}
.livery-builder.builder-app .livery-stage-workspace.is-focus .livery-view__viewport {
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    place-items: center;
    overflow: hidden;
}
.livery-builder.builder-app .livery-stage-workspace.is-focus .livery-view__viewport.is-manual-zoom {
    place-items: start;
    overflow: auto;
    overscroll-behavior: contain;
}
.livery-builder.builder-app .livery-stage-workspace.is-focus .livery-stage-sizer { margin: 0; }
.livery-builder.builder-app.is-overview-mode .livery-canvas-shell { overflow-y: auto; overflow-x: hidden; }
.livery-builder.builder-app .livery-status { flex: 0 0 auto; min-height: 42px; background: #111319; }

.livery-overview-note {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 50%, #2b2e36);
    background: color-mix(in srgb, var(--accent) 7%, #111319);
}
.livery-overview-note b { color: var(--accent); font-size: .62rem; text-transform: uppercase; }
.livery-overview-note span { color: #a4a7b0; font-size: .62rem; }
.livery-item.is-preview { pointer-events: none; cursor: default; }
.livery-layer:disabled { opacity: .38; cursor: not-allowed; }
.is-overview-mode .livery-view-card { cursor: pointer; }
.is-overview-mode .livery-view-card:hover { border-color: color-mix(in srgb, var(--accent) 70%, #3a3d45); }
.is-overview-mode .livery-inspector__content { display: none !important; }

.builder-inspector > .builder-panel__head,
.livery-inspector > header {
    min-height: 68px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.builder-inspector > .builder-panel__head > div,
.livery-inspector > header > div { display: grid; gap: 5px; }
.builder-inspector [data-app-inspector-close],
.livery-inspector [data-app-inspector-close] { display: none; }

@media (min-width: 1181px) {
    .decal-builder.builder-app:not(.is-inspector-open),
    .livery-builder.builder-app:not(.is-inspector-open) {
        grid-template-columns: var(--app-rail) minmax(0, 1fr) 0;
    }
    .builder-app:not(.is-inspector-open) > .builder-inspector,
    .builder-app:not(.is-inspector-open) > .livery-inspector {
        min-width: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        overflow: hidden;
    }
}

@media (max-width: 1180px) {
    .builder-app { --app-rail: 76px; }
    .decal-builder.builder-app {
        grid-template-columns: var(--app-rail) minmax(0, 1fr);
        grid-template-areas: "rail stage";
    }
    .livery-builder.builder-app { grid-template-columns: var(--app-rail) minmax(0, 1fr); grid-template-areas: "rail bar" "rail stage"; }
    .decal-builder.builder-app > .builder-inspector,
    .livery-builder.builder-app > .livery-inspector {
        position: fixed;
        z-index: 90;
        top: 0;
        right: 0;
        width: min(360px, calc(100vw - 76px));
        height: 100dvh;
        max-height: none;
        transform: translateX(102%);
        transition: transform .24s var(--ease-out);
        box-shadow: -24px 0 70px rgba(0,0,0,.55);
    }
    .builder-app.is-inspector-open > .builder-inspector,
    .builder-app.is-inspector-open > .livery-inspector { transform: translateX(0); }
    .builder-inspector [data-app-inspector-close],
    .livery-inspector [data-app-inspector-close] { display: grid; }
}

@media (max-width: 720px) {
    .decal-builder-page,
    .livery-builder-page { min-width: 320px; }
    .builder-app { --app-top: 58px; }
    .decal-builder.builder-app,
    .livery-builder.builder-app {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: var(--app-top) minmax(0, 1fr);
        grid-template-areas: "rail" "stage";
    }
    .livery-builder.builder-app {
        grid-template-rows: var(--app-top) auto minmax(0, 1fr);
        grid-template-areas: "rail" "bar" "stage";
    }
    .decal-builder.builder-app > .builder-workspace { grid-area: stage; height: auto; min-height: 0; padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
    .livery-builder.builder-app > .livery-projectbar { position: relative; z-index: 19; min-height: 54px; }
    .livery-builder.builder-app > .livery-stage-panel { grid-area: stage; padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
    .builder-app-rail {
        position: relative;
        height: var(--app-top);
        padding: 6px 8px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        border: 0;
        border-bottom: 1px solid #2b2e36;
        box-shadow: 0 8px 24px rgba(0,0,0,.2);
    }
    .builder-app-rail::after { margin-left: 4px; color: #9da0aa; font-size: .5rem; font-weight: 900; letter-spacing: .11em; }
    .decal-builder-page .builder-app-rail::after { content: "DECAL BUILDER"; }
    .livery-builder-page .builder-app-rail::after { content: "LIVERY LAB"; }
    .builder-app-brand { min-width: 44px; min-height: 44px; padding: 2px; }
    .builder-app-brand img { width: 38px; height: 38px; }
    .builder-app-brand > span,
    .builder-app-tools,
    .builder-app-projects { display: none; }
    .builder-app-modes { order: 3; margin-left: auto; padding: 0; display: flex; gap: 4px; border: 0; }
    .builder-app-rail .builder-app-modes a { width: 43px; min-height: 43px; padding: 4px; }
    .builder-app-rail .builder-app-modes span { display: none; }
    .builder-app-rail .is-active { box-shadow: inset 0 -3px var(--accent); }
    .builder-app-mobile-dock {
        position: fixed;
        z-index: 70;
        right: 0;
        bottom: 0;
        left: 0;
        min-height: calc(60px + env(safe-area-inset-bottom));
        padding: 5px 8px env(safe-area-inset-bottom);
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
        border-top: 1px solid #343741;
        background: rgba(13, 15, 20, .96);
        backdrop-filter: blur(16px);
        box-shadow: 0 -16px 45px rgba(0,0,0,.4);
    }
    .builder-app-mobile-dock button { min-height: 50px; padding: 4px 2px; border: 0; font-size: .43rem; }
    .builder-app-mobile-dock svg { width: 21px; height: 21px; }
    .decal-builder.builder-app .builder-projectbar,
    .livery-builder.builder-app .livery-projectbar { min-height: 56px; padding: 7px 9px; gap: 8px; }
    .decal-builder.builder-app .builder-projectbar__identity { min-width: 128px; }
    .decal-builder.builder-app .builder-projectbar__identity input { max-width: 180px; font-size: .7rem; }
    .decal-builder.builder-app .builder-projectbar__actions,
    .livery-builder.builder-app .livery-projectbar nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .decal-builder.builder-app .builder-projectbar__actions a,
    .livery-builder.builder-app .livery-projectbar nav a { display: none; }
    .decal-builder.builder-app .builder-toolbar,
    .livery-builder.builder-app .livery-toolbar { flex-wrap: nowrap; min-height: 50px; padding: 6px; overflow-x: auto; scrollbar-width: none; }
    .decal-builder.builder-app .builder-toolbar__fixed-sheet,
    .decal-builder.builder-app .builder-sheet-colors { width: auto; min-width: max-content; }
    .decal-builder.builder-app .builder-toolbar__fixed-sheet span,
    .decal-builder.builder-app .builder-sheet-colors > span { display: none; }
    .decal-builder.builder-app .builder-snap { flex: 0 0 auto; }
    .decal-builder.builder-app .builder-clear { margin-left: 0; }
    .decal-builder.builder-app .builder-help-trigger { display: none; }
    .decal-builder.builder-app .builder-canvas-shell { padding: 14px; }
    .decal-builder.builder-app .builder-statusbar,
    .livery-builder.builder-app .livery-status { min-height: 36px; padding: 7px 9px; flex-direction: row; align-items: center; overflow-x: auto; white-space: nowrap; }
    .decal-builder.builder-app .builder-statusbar span:first-child,
    .livery-builder.builder-app .livery-status span:first-child { display: none; }
    .livery-builder.builder-app .livery-projectbar > div > span,
    .livery-builder.builder-app .livery-projectbar nav button:not([data-project-revision]),
    .livery-builder.builder-app .livery-projectbar nav a { display: none; }
    .livery-builder.builder-app .livery-projectbar > div { flex: 1; }
    .livery-builder.builder-app .livery-projectbar input { width: 100%; max-width: 155px; min-height: 38px; font-size: .68rem; }
    .livery-builder.builder-app .livery-projectbar nav button { min-height: 38px; padding-inline: 8px; }
    .livery-overview-note { align-items: flex-start; flex-direction: column; gap: 2px; padding: 7px 10px; }
    .livery-overview-note b,
    .livery-overview-note span { font-size: .52rem; }
    .livery-builder.builder-app .livery-canvas-shell { padding: 7px; }
    .livery-builder.builder-app .livery-stage-workspace.is-focus,
    .livery-builder.builder-app .livery-stage-workspace.is-focus .livery-view-card { height: 100%; min-height: 350px; }
    .builder-app-library {
        inset: max(8px, env(safe-area-inset-top)) 8px auto !important;
        width: calc(100vw - 16px) !important;
        height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom))) !important;
        transform: none;
    }
    .builder-app-library > header,
    .builder-app-library > .builder-panel__head { min-height: 64px; padding: 9px 10px 9px 14px; }
    .builder-app-library .builder-library__filters,
    .builder-app-library .livery-library__filters { grid-template-columns: 1fr; }
    .builder-app-library .builder-library__filters [data-vehicle-filters] { grid-template-columns: 1fr; }
    .builder-app-library .builder-asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; }
    .builder-app-library .livery-asset-grid { grid-template-columns: 1fr; padding: 8px 10px 16px; }
    .decal-builder.builder-app > .builder-inspector,
    .livery-builder.builder-app > .livery-inspector {
        top: auto;
        bottom: calc(60px + env(safe-area-inset-bottom));
        left: 6px;
        right: 6px;
        width: auto;
        height: auto;
        max-height: min(74dvh, 680px);
        transform: translateY(calc(100% + 80px));
        border: 1px solid #41444d;
        box-shadow: 0 -30px 80px rgba(0,0,0,.65);
    }
    .builder-app.is-inspector-open > .builder-inspector,
    .builder-app.is-inspector-open > .livery-inspector { transform: translateY(0); }
}

@media (max-width: 420px) {
    .builder-app-rail::after { display: none; }
    .decal-builder.builder-app .builder-projectbar__actions button[data-project-new],
    .livery-builder.builder-app .livery-projectbar nav button[data-project-new] { display: none; }
    .livery-stage-workspace.is-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .builder-app-rail a,
    .builder-app-rail button,
    .decal-builder.builder-app > .builder-inspector,
    .livery-builder.builder-app > .livery-inspector { transition: none; }
}