/* Autobyte — reference: resistor graphic, value, reference tables */

.res-modes { display: flex; gap: 8px; margin-bottom: 12px; }
.res-modes .cchip { font-size: 12.5px; padding: 6px 14px; }

.res-wrap { display: flex; justify-content: center; padding: 6px 0 2px; }
.res-svg { width: 100%; max-width: 340px; height: auto; filter: drop-shadow(0 2px 5px rgba(0,0,0,.16)); }

.res-val { text-align: center; margin: 6px 0 14px; }
.res-val b { font-size: 30px; font-weight: 800; color: var(--primary); letter-spacing: -.5px; }
.res-val span { font-size: 15px; color: var(--muted); font-weight: 600; margin-left: 6px; }

.ref-sw { display: inline-block; width: 13px; height: 13px; border-radius: 3px;
  border: 1px solid var(--border); margin-right: 8px; vertical-align: -2px; }

.ref-wrap { overflow-x: auto; }
.ref-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ref-table th { text-align: left; padding: 8px 7px; color: var(--muted);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px;
  border-bottom: 1px solid var(--border); white-space: nowrap; }
.ref-table td { padding: 8px 7px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.ref-table tr:last-child td { border-bottom: 0; }
.ref-table td:last-child { white-space: normal; color: var(--muted); }

/* ---- DTC decoder ---- */
.dtc-break { display: flex; gap: 8px; margin: 12px 0 6px; flex-wrap: wrap; }
.dtc-seg { flex: 1; min-width: 56px; text-align: center; border: 1.5px solid; border-radius: 10px; overflow: hidden; }
.dtc-seg__c { color: #fff; font-size: 22px; font-weight: 800; padding: 8px 4px; }
.dtc-seg__l { font-size: 10.5px; color: var(--muted); padding: 5px 4px; font-weight: 600; }
#ftb_table tr.on td { background: rgba(14,124,123,.12); color: var(--primary); font-weight: 700; }

/* ---- sensor graphics ---- */
.sns-wrap { display: flex; justify-content: center; margin: 4px 0 10px; }
.sns-svg { width: 100%; max-width: 320px; height: auto; }
.sns-svg--sm { max-width: 290px; }

/* ---- CAN ---- */
.can-svg { width: 100%; max-width: 340px; height: auto; display: block; margin: 0 auto 8px; }
.can-term { display: flex; justify-content: center; margin: 4px 0 10px; }
.can-term__svg { width: 100%; max-width: 260px; height: auto; }

/* ---- OBD connector ---- */
.obd-wrap { display: flex; justify-content: center; margin: 6px 0; }
.obd-svg { width: 100%; max-width: 360px; height: auto; }
.obd-pin { cursor: pointer; transition: transform .1s; transform-box: fill-box; transform-origin: center; }
.obd-pin:hover { stroke: var(--primary); stroke-width: 2.5; }
.obd-pin.on { stroke: var(--primary); stroke-width: 3.5; }
.obd-legend { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 4px 0 10px; }
.obd-leg { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.obd-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: -1px; }
.obd-detail { text-align: center; font-weight: 700; color: var(--primary); background: rgba(14,124,123,.08);
  border-radius: 9px; padding: 9px; margin-bottom: 10px; font-size: 14px; }
#obd_table tr[data-pin] { cursor: pointer; }
#obd_table tr.on td { background: rgba(14,124,123,.12); color: var(--primary); font-weight: 700; }

/* ---- bolt torque ---- */
.bolt-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 6px 0 2px; }
.bolt-head { text-align: center; }
.bolt-graphic { width: 96px; }
.bolt-svg { width: 96px; height: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,.18)); }
.bolt-cap { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 2px; }