/* Handling Editor (/CITtools/VehicleStats/handling/). Builds on /CITtools/assets/ids/ids.css. */
.hx-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 12px 0; }
.hx-pick { display: flex; flex-direction: column; gap: 4px; min-width: 240px; flex: 1 1 260px; }
.hx-pick span { font-size: 0.85rem; color: #9fb0c3; }
.hx-pick input, .hx-pick select, .hx-buttons button, .hx-ctl input[type="number"], .hx-ctl select { min-height: 44px; }
.hx-pick select { width: 100%; }
.hx input[type="number"], .hx input[type="search"], .hx select { padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); color: var(--text); font: inherit; }
.hx input:focus-visible, .hx select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hx input[type="range"] { accent-color: var(--accent); }
.hx-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.hx-buttons button, .hx-reset { padding: 0 14px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.06); color: inherit; cursor: pointer; }
.hx-reset { min-height: 36px; }
.hx-now { font-weight: 600; }
.hx-group { margin: 18px 0; }
.hx-group > h2 { border-bottom: 1px solid rgba(255, 255, 255, 0.12); padding-bottom: 4px; }
.hx-row { padding: 10px; margin: 8px 0; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); }
.hx-row.changed { border-color: #efbe58; background: rgba(239, 190, 88, 0.07); }
.hx-row.bad { border-color: #ff8a8a; background: rgba(255, 138, 138, 0.08); }
.hx-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.hx-head h3 { margin: 0; font-size: 1rem; }
.hx-unit { color: #9fb0c3; font-weight: 400; font-size: 0.85rem; }
.hx-prop { font-size: 0.8rem; color: #cfe3ff; }
.hx-desc, .hx-rule { margin: 4px 0; font-size: 0.9rem; }
.hx-rule { color: #9fb0c3; }
.hx-err { margin: 4px 0; color: #ffb0b0; font-weight: 600; }
.hx-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 6px; }
.hx-ctl input[type="number"] { width: 9em; }
.hx-ctl input[type="range"] { flex: 1 1 180px; min-width: 140px; min-height: 32px; }
.hx-default { font-family: ui-monospace, Consolas, monospace; font-size: 0.85rem; color: #9fb0c3; }
.hx-default::before { content: "Default: "; }
.hx-axis { display: inline-flex; align-items: center; gap: 4px; }
.hx-axis input { width: 6.5em; }
.hx-check { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.hx-check input, .hx-bit input { width: 22px; height: 22px; }
.hx-hex { font-family: ui-monospace, Consolas, monospace; font-weight: 600; }
.hx-bits { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 10px; width: 100%; }
.hx-bit { display: flex; align-items: center; gap: 6px; min-height: 36px; font-size: 0.85rem; font-family: ui-monospace, Consolas, monospace; }
.hx-bit small { color: #9fb0c3; font-family: inherit; }
.hx-cmp { font-size: 0.85rem; color: #cfe3ff; }
.hx-code { margin: 20px 0; padding: 12px; border-radius: 10px; background: rgba(239, 190, 88, 0.06); border: 1px solid rgba(239, 190, 88, 0.3); }
.hx-code h3 { margin: 10px 0 4px; font-size: 0.95rem; }
.hx-block { align-items: flex-start; }
.hx-block pre { margin: 0; flex: 1; overflow-x: auto; white-space: pre; }
@media (max-width: 480px) { .hx-ctl input[type="number"] { width: 100%; } .hx-axis { width: 100%; } .hx-axis input { flex: 1; } }