/* Garage Designer — tool styles. Relies on site tokens defined in includes/header.php. */

.gd-section{padding:4.5rem 0 7rem;background:var(--paper)}
.gd-layout{display:grid;grid-template-columns:380px minmax(0,1fr);gap:1.4rem;align-items:start;margin-top:2.5rem}
@media(max-width:1023px){.gd-layout{grid-template-columns:1fr}}

/* ---- Sidebar panels ---- */
.gd-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:1.5rem 1.5rem 1.6rem;box-shadow:var(--shadow-card);margin-bottom:1.1rem}
.gd-step-label{font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--blue);margin-bottom:.3rem}
.gd-panel h3{font-family:var(--ff-display);font-weight:600;font-size:1.1rem;letter-spacing:-.015em;color:var(--text);margin-bottom:1rem}
.gd-panel .gd-hint{font-size:.82rem;color:var(--text-2);line-height:1.55;margin-top:.7rem}

/* Dimension inputs */
.gd-dims{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.gd-field label{display:block;font-size:.78rem;font-weight:600;color:var(--text-2);margin-bottom:.35rem}
.gd-ftin{display:flex;gap:.35rem}
.gd-ftin .gd-unit{position:relative;flex:1;min-width:0}
.gd-ftin input{width:100%;padding:.6rem .55rem;padding-right:1.45rem;border:1.5px solid var(--line);border-radius:10px;font-family:var(--ff-body);font-size:.95rem;font-weight:600;color:var(--text);background:#fff;text-align:right;-moz-appearance:textfield}
.gd-ftin input::-webkit-outer-spin-button,.gd-ftin input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.gd-ftin input:focus{outline:none;border-color:var(--blue)}
.gd-ftin .gd-unit::after{content:attr(data-u);position:absolute;right:.5rem;top:50%;transform:translateY(-50%);font-size:.72rem;font-weight:700;color:var(--text-2);pointer-events:none}
.gd-total-in{font-size:.74rem;color:var(--text-2);margin-top:.3rem;text-align:right;white-space:nowrap}

/* Lift cards */
.gd-lift-card{display:grid;grid-template-columns:84px minmax(0,1fr);gap:.9rem;align-items:center;padding:.85rem;border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff;margin-bottom:.7rem;transition:border-color .2s,box-shadow .2s}
.gd-lift-card:hover{border-color:#C9D2D8;box-shadow:var(--shadow-card)}
.gd-lift-card.in-layout{border-color:var(--blue);background:var(--blue-tint)}
.gd-lift-thumb{width:84px;height:84px;border-radius:9px;background:#EDEFEC;display:flex;align-items:center;justify-content:center;overflow:hidden}
.gd-lift-thumb canvas{display:block}
.gd-lift-card h4{font-family:var(--ff-display);font-weight:600;font-size:.93rem;letter-spacing:-.01em;color:var(--text);line-height:1.3}
.gd-lift-dims{font-size:.78rem;color:var(--text-2);margin:.15rem 0 .45rem}
.gd-lift-meta{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.gd-badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.69rem;font-weight:700;letter-spacing:.02em;padding:.22rem .55rem;border-radius:99px}
.gd-badge.ok{background:#E5F4EA;color:#1F7A3D}
.gd-badge.bad{background:#FCE9E9;color:#C0392B}
.gd-badge.warn{background:#FCF3E3;color:#A2701B}
.gd-add-btn{margin-left:auto;border:none;background:var(--blue);color:#fff;font-family:var(--ff-body);font-weight:600;font-size:.78rem;padding:.45rem .85rem;border-radius:9px;cursor:pointer;transition:background .2s}
.gd-add-btn:hover{background:var(--blue-deep)}
.gd-add-btn:disabled{background:#B9C2C9;cursor:not-allowed}

/* Clearance / vehicle inputs */
.gd-veh-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.gd-veh-grid input{width:100%;padding:.6rem .7rem;border:1.5px solid var(--line);border-radius:10px;font-family:var(--ff-body);font-size:.95rem;font-weight:600;color:var(--text)}
.gd-veh-grid input:focus{outline:none;border-color:var(--blue)}
.gd-bottom-select{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.7rem}
.gd-bottom-q{font-size:.78rem;font-weight:600;color:var(--text-2);margin-right:.15rem}

/* Result alerts */
.gd-alert{display:flex;gap:.75rem;align-items:flex-start;border-radius:var(--r-sm);padding:.95rem 1.05rem;margin-top:1rem;font-size:.88rem;line-height:1.55}
.gd-alert i{margin-top:.18rem;font-size:.95rem}
.gd-alert.ok{background:#E5F4EA;color:#15592C;border:1px solid #BFE3CB}
.gd-alert.bad{background:#FCE9E9;color:#8E2A20;border:1px solid #F2C8C4}
.gd-alert.neutral{background:#F1F3F0;color:var(--text-2);border:1px solid var(--line)}
.gd-alert strong{font-weight:700}
.gd-alert .gd-alert-math{display:block;margin-top:.3rem;font-size:.8rem;opacity:.85}

/* ---- Canvas card ---- */
.gd-canvas-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-card);overflow:hidden;position:sticky;top:90px}
@media(max-width:1023px){.gd-canvas-card{position:static}}
.gd-toolbar{display:flex;align-items:center;gap:.5rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--line);flex-wrap:wrap}
.gd-toolbar .gd-sel-name{font-family:var(--ff-display);font-weight:600;font-size:.9rem;color:var(--text);margin-right:auto;min-height:1.2em}
.gd-tool-btn{display:inline-flex;align-items:center;gap:.45rem;background:#F1F3F0;border:none;border-radius:9px;color:var(--text);font-family:var(--ff-body);font-weight:600;font-size:.8rem;padding:.5rem .85rem;cursor:pointer;transition:background .2s,color .2s}
.gd-tool-btn:hover:not(:disabled){background:var(--blue-tint);color:var(--blue)}
.gd-tool-btn:disabled{opacity:.45;cursor:not-allowed}
.gd-tool-btn.danger:hover:not(:disabled){background:#FCE9E9;color:#C0392B}
.gd-ramp-toggle{display:inline-flex;align-items:center;gap:.45rem;background:#F1F3F0;border-radius:9px;padding:.5rem .85rem;font-size:.8rem;font-weight:600;color:var(--text);cursor:pointer;user-select:none}
.gd-ramp-toggle input{accent-color:var(--blue);width:14px;height:14px;cursor:pointer}
.gd-ramp-toggle.disabled{opacity:.45;cursor:not-allowed}
.gd-ramp-toggle.disabled input{cursor:not-allowed}
.gd-canvas-wrap{position:relative;background:#fff}
#gdCanvas{display:block;width:100%;touch-action:none;outline:none;cursor:default}
#gdCanvas.dragging{cursor:grabbing}
#gdCanvas.hovering{cursor:grab}

/* Floating stack-clearance banner over canvas */
.gd-canvas-banner{position:absolute;left:50%;top:.9rem;transform:translateX(-50%);display:none;align-items:center;gap:.5rem;background:#C0392B;color:#fff;font-size:.8rem;font-weight:600;padding:.5rem .95rem;border-radius:99px;box-shadow:0 10px 26px -8px rgba(192,57,43,.55);max-width:calc(100% - 2rem);text-align:center;z-index:5}
.gd-canvas-banner.show{display:inline-flex}

/* Status chips under canvas */
.gd-statusbar{display:flex;flex-wrap:wrap;gap:.45rem;padding:.85rem 1.1rem;border-top:1px solid var(--line);min-height:2.9rem}
.gd-statusbar:empty{display:none}

/* Empty-canvas hint */
.gd-canvas-hint{position:absolute;inset:auto 50% 1rem auto;transform:translateX(50%);background:rgba(23,28,33,.82);color:#fff;font-size:.78rem;padding:.45rem .9rem;border-radius:99px;pointer-events:none;white-space:nowrap}

/* ---- Save & share ---- */
.gd-save-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:.9rem}
.gd-save-grid input{width:100%;padding:.6rem .7rem;border:1.5px solid var(--line);border-radius:10px;font-family:var(--ff-body);font-size:.92rem;color:var(--text)}
.gd-save-grid input:focus{outline:none;border-color:var(--blue)}
@media(max-width:480px){.gd-save-grid,.gd-veh-grid,.gd-dims{grid-template-columns:1fr}}
.gd-share-result{display:none;margin-top:.9rem;background:var(--blue-tint);border:1px solid #CBE4F1;border-radius:var(--r-sm);padding:.8rem .95rem;font-size:.84rem;color:var(--text)}
.gd-share-result.show{display:block}
.gd-share-row{display:flex;gap:.5rem;margin-top:.5rem}
.gd-share-row input{flex:1;min-width:0;padding:.5rem .6rem;border:1px solid #CBE4F1;border-radius:8px;font-size:.8rem;color:var(--text-2);background:#fff}
.gd-error{display:none;margin-top:.7rem;font-size:.84rem;color:#C0392B}
.gd-error.show{display:block}