/* 30-elevation.css — the hero rack elevation drawing + its side summary. */

.elev-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.elev-back { flex-shrink: 0; }
.elev-titlebox { min-width: 120px; }
.elev-title { font-size: 22px; line-height: 1.1; }
.elev-meter { display: flex; align-items: center; gap: 8px; }
.elev-meter .meter { width: 140px; }
.elev-stamps { display: flex; gap: 6px; flex-wrap: wrap; }
.elev-actions { display: flex; gap: 8px; margin-left: auto; }

.elev-body { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 860px) { .elev-body { grid-template-columns: 1fr; } }

.elev-drawing { padding: 14px; }
.elev-svg { display: block; width: 100%; height: auto; }

/* frame + rails + scale */
.ev-frame { fill: var(--card2); stroke: var(--ink); stroke-width: 2; }
.ev-frame.ghost { fill: none; stroke: var(--ghost); stroke-dasharray: 6 5; }
.ev-rail { stroke: var(--steel); stroke-width: 1.6; }
.ev-rail.ghost { stroke: var(--ghost); stroke-dasharray: 4 4; }
.ev-utick { stroke: var(--hair); stroke-width: 1; }
.ev-unum { font-family: var(--font-mono); font-size: 9px; fill: var(--steel); text-anchor: end; }
.ev-caption {
  font-family: var(--font-draw); font-weight: 600; font-size: 11px;
  letter-spacing: .14em; fill: var(--steel); text-anchor: middle;
}

/* devices */
.ev-dev { cursor: pointer; }
.ev-face { fill: var(--rackface); stroke: #0e1114; stroke-width: .8; }
.ev-dev.kind-panel .ev-face { fill: var(--rackface2); }
.ev-dev.kind-blank .ev-face { fill: none; stroke: var(--ghost); }
.ev-dev:hover .ev-face { stroke: var(--blueline); stroke-width: 1.6; }

.ev-dev.ghost .ev-face { fill: none; stroke: var(--ghost); stroke-dasharray: 5 4; stroke-width: 1.2; }
.ev-dev.ghost .ev-devname { fill: var(--ghost); }

.ev-devname {
  font-family: var(--font-mono); font-size: 8.5px; fill: #cfd8de;
  pointer-events: none;
}
.ev-screw { fill: var(--steel); opacity: .7; }

.ev-port { fill: #14181b; stroke: #000; stroke-width: .3; cursor: pointer; }
.ev-port:hover { stroke: #fff; stroke-width: 1; }
.ev-port.lit { stroke: rgba(0,0,0,.4); }
.ev-bezel { fill: #1a1f23; }
.ev-led { fill: #3a444c; }
.ev-led.on { fill: var(--stamp); }
.ev-vent { stroke: #3a444c; stroke-width: 1.6; stroke-linecap: round; }
.ev-outlet { fill: #14181b; stroke: #000; }
.ev-hatch { stroke: var(--ghost); stroke-width: 1; }
.ev-labelstrip { stroke: #e8edf0; stroke-width: 3; opacity: .8; }

/* side summary */
.elev-side { display: flex; flex-direction: column; gap: 12px; }
.elev-card { padding: 14px; }
.elev-card-title { font-size: 13px; margin-bottom: 10px; }
.elev-gate-row { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: center; margin-bottom: 7px; }
.elev-flag-row { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; flex-wrap: wrap; font-size: 13.5px; }
.elev-type-row { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; font-size: 14px; }
.elev-type-row .mono { margin-left: auto; }
.elev-card .btn { margin-top: 8px; }