/* Explain: Styling for the 3D garage interface, tools, and workspace. */
.garage-toolbar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem; }
.garage-version { color:var(--silver-color); border-color:var(--glass-border); min-height:2rem; height:auto; padding:.45rem .8rem; white-space:normal; }
.garage-status { min-height:2.5rem; padding:.6rem 0; color:var(--text-muted); font-size:.9rem; overflow-wrap:anywhere; }
.garage-status.is-error { color:var(--sage-dark); }
.garage-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:1.25rem; align-items:start; }
.garage-viewport { position:relative; height:clamp(22rem,65vh,52rem); min-width:0; overflow:hidden; border:1px solid var(--glass-border); border-radius:1.25rem; background:var(--garage-black); box-shadow:var(--shadow-soft); }
.garage-viewport canvas { display:block; width:100%; height:100%; touch-action:none; outline-offset:-4px; }
.garage-viewport canvas:focus-visible { outline:2px solid var(--silver-color); }
.garage-loading { position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1rem; padding:2rem; background:var(--garage-black); color:var(--text-color); text-align:center; pointer-events:none; }
.garage-loading.hidden { display:none; }
.garage-view-controls { display:flex; flex-wrap:wrap; gap:.8rem; align-items:end; padding-top:1rem; }
.garage-view-controls fieldset { flex:1; min-width:9rem; }
.garage-tools { min-width:0; border:1px solid var(--glass-border); border-radius:1.25rem; background:var(--surface-color); padding:1.25rem; }
.garage-fields { display:grid; gap:.75rem; margin-top:1rem; }
.garage-tools .fieldset { min-width:0; }
.garage-tools .fieldset label { color:var(--text-muted); font-size:.85rem; }
.garage-tools :is(.select,.input,.file-input) { border-color:var(--glass-border); min-height:2.75rem; max-width:100%; }
.garage-tools input[type="color"] { padding:.35rem; }
.garage-save-actions { display:grid; gap:.75rem; border-top:1px solid var(--glass-border); margin-top:1.5rem; padding-top:1.25rem; }
.garage-primary, .garage-secondary, .garage-danger { height:auto; min-height:2.75rem; white-space:normal; padding:.7rem 1.1rem; border-radius:.8rem; cursor:pointer; transition:background 200ms ease,border-color 200ms ease; }
.garage-primary { background:var(--button-color); color:var(--text-color); border-color:var(--button-color); }
.garage-primary:hover { background:var(--primary-hover); }
.garage-secondary { background:var(--menu-bg); color:var(--text-color); border:1px solid var(--glass-border); }
.garage-secondary:hover, .garage-secondary[aria-pressed="true"] { border-color:var(--silver-color); background:var(--menu-hover-bg); }
.garage-danger { color:var(--sage-dark); background:var(--menu-bg); border:1px solid var(--sage-dark); }
.garage-dialog { background:var(--surface-color); color:var(--text-color); border:1px solid var(--glass-border); }
.garage-history-item { padding:.8rem; border:1px solid var(--glass-border); border-radius:.75rem; background:var(--menu-bg-alt); overflow-wrap:anywhere; }
@media (min-width:1024px) {
    .garage-layout.is-editing { grid-template-columns:minmax(0,1fr) 20rem; }
    .garage-tools { max-height:80vh; overflow-y:auto; scrollbar-width:thin; }
}
@media (max-width:639px) {
    .garage-toolbar .btn { flex:1 1 100%; }
    .garage-viewport { height:58vh; min-height:22rem; }
}
@media (prefers-reduced-motion:reduce) {
    .garage-primary, .garage-secondary { transition:none; }
}