/* Tire Shop Simulator Tycoon - extra panels for the tire machines (work/tire.js, work/balance.js, work/tireserv.js):
   checklists, the repair rules card, the rotation diagram, the balancer and TPMS tool readouts. Classes start with wt-. */
.wt-panel { gap: 10px; min-width: min(560px, 92vw); }
.wt-check { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 8px; width: 100%; }
.wt-tick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px 10px 40px; min-height: 56px; position: relative; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); text-align: left; color: var(--text); }
.wt-tick i { position: absolute; left: 10px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 6px; border: 2px solid var(--muted); }
.wt-tick.on { border-color: var(--acc); background: rgba(255,107,26,.14); } .wt-tick.on i { background: var(--acc); border-color: var(--acc); } .wt-tick.on i::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-style: normal; font-size: 14px; font-weight: 800; }
.wt-tick b { font-family: var(--hd); font-size: 17px; letter-spacing: .02em; } .wt-tick small { font-size: 12.5px; line-height: 1.25; color: var(--muted); }
.wt-done { align-self: center; min-width: 160px; }
/* repair rules / notes card: sits above the choices */
.wt-note { padding: 8px 14px; }
.wt-rules { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: center; font-size: 14px; }
.wt-rules b { font-family: var(--hd); text-transform: uppercase; letter-spacing: .1em; color: var(--acc); font-size: 13px; }
.wt-rules span::before { content: '• '; color: var(--muted); }
/* direction-of-travel diagram for directional tires */
.wt-diag { padding: 8px 14px; }
.wt-side { display: grid; grid-template-columns: auto auto; gap: 4px 14px; align-items: center; justify-items: center; }
.wt-side .wt-car { position: relative; width: 150px; height: 46px; border-radius: 18px 26px 8px 8px; background: linear-gradient(#4a5865, #2c3640); border: 1px solid var(--line); }
.wt-side.l .wt-car { transform: scaleX(-1); } .wt-side.l .wt-car b { transform: scaleX(-1); }
.wt-side .wt-car b { position: absolute; left: 0; right: 0; top: 8px; text-align: center; font-family: var(--hd); font-size: 12px; letter-spacing: .14em; color: #d9e2ea; }
.wt-side .wt-car i { position: absolute; bottom: -12px; width: 26px; height: 26px; border-radius: 50%; background: #16181b; border: 4px solid #8d9399; } .wt-side .wt-car .w1 { left: 18px; } .wt-side .wt-car .w2 { right: 18px; }
.wt-side span { font-family: var(--hd); font-weight: 800; font-size: 20px; color: var(--acc); letter-spacing: .06em; }
.wt-side small { grid-column: 1 / -1; font-size: 13px; color: var(--muted); margin-top: 8px; }
/* tables (TPMS results, rotation, pressures) */
.wt-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.wt-table th { color: var(--muted); font-weight: 500; text-align: left; padding: 3px 10px 3px 0; font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; }
.wt-table td { font-family: var(--mono); padding: 4px 10px 4px 0; } .wt-table td.bad { color: var(--bad); } .wt-table td.warn { color: var(--warn); } .wt-table td.good { color: var(--go); }
/* rotation pattern diagrams inside the choice cards */
.wv-opt i svg { width: 46px; height: 58px; display: block; }
/* dash warning light */
.wt-dash { display: flex; align-items: center; gap: 12px; justify-content: center; font-family: var(--hd); font-size: 18px; font-weight: 700; }
.wt-dash i { font-style: normal; display: grid; place-items: center; width: 44px; height: 36px; border-radius: 50% 50% 40% 40%; border: 3px solid #3a4048; color: #3a4048; font-weight: 800; }
.wt-dash i.on { border-color: #f2c21a; color: #f2c21a; box-shadow: 0 0 16px rgba(242,194,26,.7); }
/* pattern cards for rotation */
.wt-pats { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 8px; width: 100%; }
.wt-pat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; min-height: 64px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); }
.wt-pat svg { width: 64px; height: 82px; } .wt-pat b { font-family: var(--hd); font-size: 16px; } .wt-pat.no { opacity: .35; border-color: var(--bad); }
.wt-pat svg rect { fill: #2c3640; stroke: #6f7b86; } .wt-pat svg .t { fill: #111; stroke: #9aa4ad; } .wt-pat svg path { stroke: var(--acc); stroke-width: 3; fill: none; marker-end: url(#wt-ah); }
@media (max-height: 520px) {
  .wt-tick { min-height: 44px; padding: 6px 10px 6px 38px; } .wt-tick b { font-size: 15px; } .wt-tick small { display: none; }
  .wt-panel { gap: 6px; } .wt-side .wt-car { width: 110px; height: 36px; } .wt-side small { display: none; }
  .wt-pat svg { width: 44px; height: 56px; } .wt-pat { min-height: 50px; padding: 4px; }
  .wv-opt i svg { width: 32px; height: 40px; }
}