/* Vehicles: the sheet's handling and seats panels. */

/* handling: the game's bars against the best of its class, the numbers, its horn */
.hpanel { width: 100%; height: 100%; overflow-y: auto; padding: var(--s-4) var(--s-5); }
.hhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.hhead h4 { margin: 0; }
.hcmp { display: flex; align-items: center; gap: var(--s-2); color: var(--muted); font: var(--t-small); font-weight: 600; }
.hcmp input { width: 180px; height: var(--h-sm); }
.hlegend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 14px; color: var(--muted); font: var(--t-code-small); }
.hlegend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; }
.hlegend button { padding: 0 4px; border: 0; background: none; color: var(--faint); cursor: pointer; }
.hlegend button:hover { color: var(--text); }
.hbar { display: grid; grid-template-columns: 150px 1fr; gap: var(--s-3); align-items: center; margin-bottom: 10px; }
.hbar span { color: var(--text); font: var(--t-label); font-size: 13.5px; }
.hbar small { display: block; color: var(--faint); font: var(--t-code-small); font-size: 10.5px; }
/* room at the end of the track for the value of a full bar */
.hbar > div { display: grid; gap: 3px; padding-right: 40px; }
.hbar i { position: relative; display: block; min-width: 2px; height: 14px; border-radius: 4px; }
.hbar i b { position: absolute; left: calc(100% + 6px); top: -1px; color: var(--muted); font: var(--t-code-small); white-space: nowrap; }
.hfacts { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--s-5); margin: var(--s-3) 0; }
.hsound { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-2) 0; }
.hsound b { flex: none; width: 70px; font: var(--t-label); }
.hsound .player { flex: 1; }
@media (max-width: 700px) { .hbar { grid-template-columns: 1fr; gap: 4px; } .hfacts { grid-template-columns: 1fr; } }

/* seats, doors and bones: on the model, with their numbers */
.rigrows { display: grid; gap: 2px; margin-bottom: var(--s-3); }
.rigrows.bones { max-height: 260px; overflow-y: auto; }
.rigrows button { display: grid; grid-template-columns: 34px 1fr auto; gap: var(--s-2); align-items: center; padding: 7px 10px; border: 1px solid transparent; border-radius: var(--r-1); background: var(--sunken); color: var(--text); font: var(--t-small); text-align: left; transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease); }
.rigrows.bones button { grid-template-columns: 52px 1fr; }
.rigrows button:hover { border-color: var(--line-2); }
.rigrows button.on { border-color: var(--accent-line); background: var(--accent-bg); }
.rigrows b { color: var(--accent-text); font: var(--t-code-small); font-weight: 600; }
.rigrows code { color: var(--muted); font: var(--t-code-small); font-size: 11px; }
.rigfind { width: 100%; height: var(--h-sm); margin-bottom: 6px; }
.riglabel { position: absolute; left: 0; top: 0; margin: -22px 0 0 6px; padding: 1px 6px; border-radius: 4px; background: rgba(10, 8, 18, .75); color: var(--white); font: 600 10.5px var(--code); white-space: nowrap; pointer-events: none; }
.riglabel.on { background: var(--violet); }
.riglabel[hidden] { display: none; }