/* Tire Shop Simulator Tycoon - panels for the service procedures (work/oil.js, fluids.js, battery.js, lights.js, quick.js):
   part swatches on the choice cards, checklists, the dash cluster, the dipstick and refractometer cards, the battery tester
   screen, the light switch panel. Classes start with ws-. */
/* part swatches inside .wv-opt i */
.ws-sw { display: inline-grid; place-items: center; font-style: normal; font-family: var(--hd); font-weight: 800; font-size: 10px; color: #fff; text-shadow: 0 1px 2px #000a; letter-spacing: .02em; vertical-align: middle; }
.ws-can { width: 22px; height: 30px; border-radius: 5px 5px 3px 3px; background: linear-gradient(90deg, rgba(0,0,0,.25), transparent 35%, rgba(255,255,255,.25) 55%, rgba(0,0,0,.2)), var(--c); box-shadow: inset 0 3px 0 rgba(0,0,0,.35); }
.ws-jug { width: 26px; height: 32px; border-radius: 4px 9px 4px 4px; background: linear-gradient(90deg, rgba(0,0,0,.2), transparent 40%, rgba(255,255,255,.22)), var(--c); position: relative; }
.ws-jug::before { content: ''; position: absolute; left: 4px; top: -6px; width: 8px; height: 7px; border-radius: 2px; background: #1c1d21; }
.ws-box { width: 34px; height: 24px; border-radius: 3px; background: linear-gradient(#c9ced3 0 22%, var(--c) 22%); position: relative; }
.ws-box::before, .ws-box::after { content: ''; position: absolute; top: -5px; width: 6px; height: 5px; border-radius: 2px 2px 0 0; background: #9a9da0; } .ws-box::before { left: 4px; } .ws-box::after { right: 4px; }
.ws-bulb { width: 18px; height: 26px; border-radius: 50% 50% 30% 30%; background: radial-gradient(circle at 40% 35%, #fff, var(--c) 60%); box-shadow: 0 6px 0 -2px #8d9399; }
.ws-blade { width: 34px; height: 8px; border-radius: 4px; background: linear-gradient(#2a2e33, #121314); box-shadow: 0 3px 0 -1px #555; }
/* free panels */
.ws-panel { gap: 10px; min-width: min(560px, 92vw); }
.ws-check { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 8px; width: 100%; }
.ws-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); }
.ws-tick i { position: absolute; left: 10px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 6px; border: 2px solid var(--muted); }
.ws-tick.on { border-color: var(--acc); background: rgba(255,107,26,.14); } .ws-tick.on i { background: var(--acc); border-color: var(--acc); } .ws-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; }
.ws-tick b { font-family: var(--hd); font-size: 17px; letter-spacing: .02em; } .ws-tick small { font-size: 12.5px; line-height: 1.25; color: var(--muted); }
.ws-done { align-self: center; min-width: 160px; }
.ws-either { padding: 8px; } .ws-alt { min-width: 200px; }
.ws-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* waiting bar (draining, exchanging) */
.ws-wait { flex-direction: column; gap: 8px; min-width: min(520px, 86vw); }
.ws-prog { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%; }
.ws-prog output { font-family: var(--mono); font-size: 20px; min-width: 64px; text-align: right; }
.ws-wait.in .wv-bar i { background: linear-gradient(90deg, var(--go2), var(--go)); }
.ws-note { font-style: normal; color: #d9e2ea; font-size: 15px; min-height: 18px; }
/* service lookup card */
.ws-info { text-align: left; } .ws-info h4 { font-family: var(--hd); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); margin: 0 0 6px; }
.ws-info table { border-collapse: collapse; width: 100%; font-size: 14px; } .ws-info th { color: var(--muted); font-weight: 500; text-align: left; padding: 3px 12px 3px 0; white-space: nowrap; } .ws-info td { font-family: var(--mono); padding: 3px 0; }
.ws-info small { display: block; margin-top: 6px; color: var(--muted); }
/* dash cluster */
.ws-dashp { align-items: center; gap: 10px; }
.ws-dash { display: grid; grid-template-columns: 96px auto 150px; align-items: center; gap: 16px; padding: 10px 16px; border-radius: 40px; background: radial-gradient(ellipse at 50% 30%, #1d242c, #090c0f); border: 2px solid #2d3641; min-width: min(460px, 86vw); }
.ws-gauge { width: 84px; height: 84px; border-radius: 50%; border: 3px solid #3a4652; display: grid; place-content: center; text-align: center; box-shadow: inset 0 0 14px #000; }
.ws-gauge b { font-family: var(--mono); font-size: 20px; color: #e8f1f8; } .ws-gauge small { font-size: 11px; color: var(--muted); letter-spacing: .14em; }
.ws-lights { display: flex; gap: 10px; }
.ws-tl { font-style: normal; display: grid; place-items: center; width: 40px; height: 34px; border-radius: 8px; font-size: 19px; filter: grayscale(1) brightness(.35); border: 1px solid #222a33; }
.ws-tl.on { filter: none; background: rgba(242,60,40,.18); border-color: #f2c21a; box-shadow: 0 0 14px rgba(242,194,26,.55); }
.ws-tl.oil.on { background: rgba(229,72,77,.3); border-color: var(--bad); box-shadow: 0 0 16px rgba(229,72,77,.7); }
.ws-odo { text-align: right; } .ws-odo small { display: block; color: var(--muted); font-size: 12px; } .ws-odo b { font-family: var(--mono); font-size: 18px; color: #9be7f2; }
/* dipstick tip */
.ws-dipp { padding: 10px 16px; }
.ws-dipcard { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.ws-stick { position: relative; width: min(460px, 78vw); height: 34px; border-radius: 4px 17px 17px 4px; background: linear-gradient(#d9dee2, #9aa3ab); overflow: hidden; border: 1px solid #5c646b; }
.ws-wet { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(150,105,25,.9), rgba(199,154,42,.75)); }
.ws-hatch { position: absolute; top: 6px; bottom: 6px; background: repeating-linear-gradient(45deg, transparent 0 5px, rgba(0,0,0,.35) 5px 7px); }
.ws-stick i { position: absolute; top: 0; bottom: 0; width: 2px; background: #1c1d21; font-style: normal; font-family: var(--hd); font-weight: 800; font-size: 13px; color: #1c1d21; } .ws-stick i::after { content: attr(class); display: none; }
.ws-stick .ws-l::before, .ws-stick .ws-f::before { position: absolute; top: 8px; left: 5px; } .ws-stick .ws-l::before { content: 'L'; } .ws-stick .ws-f::before { content: 'F'; }
.ws-stick i { color: transparent; } .ws-stick i::before { color: #1c1d21; }
/* refractometer */
.ws-refr { display: flex; gap: 14px; align-items: center; }
.ws-eye { position: relative; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; border: 6px solid #1c1f24; box-shadow: 0 0 0 2px #444; background: #f4f7fb; }
.ws-eye .ws-blue { position: absolute; left: 0; right: 0; top: 0; background: #2b73c9; }
.ws-eye .ws-scale { position: absolute; left: 50%; top: 0; bottom: 0; width: 64px; margin-left: -10px; }
.ws-eye .ws-scale span { position: absolute; left: 0; font-family: var(--mono); font-size: 10px; color: #111; border-top: 1px solid #111; padding-left: 14px; line-height: 1; }
.ws-refr p { margin: 0; max-width: 220px; font-size: 13.5px; color: var(--muted); }
/* fluid sample on a towel */
.ws-towel { display: flex; gap: 14px; align-items: center; }
.ws-blot { width: 110px; height: 80px; border-radius: 8px; background: #f3f1ea; display: grid; place-items: center; box-shadow: inset 0 0 0 1px #cfcabd; }
.ws-blot i { width: 54px; height: 40px; border-radius: 48% 52% 40% 60%; background: var(--c); opacity: .9; filter: blur(.6px); }
.ws-towel p { margin: 0; font-size: 14px; max-width: 260px; }
/* battery tester screen */
.ws-tester { min-width: min(320px, 70vw); padding: 10px 14px; border-radius: 10px; background: #0d1a10; border: 3px solid #23272c; font-family: var(--mono); color: #9cf5a8; text-shadow: 0 0 6px rgba(80,255,120,.35); }
.ws-tester h5 { margin: 0 0 6px; font-size: 13px; letter-spacing: .1em; color: #c9f7cf; }
.ws-tester div { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; padding: 1px 0; }
.ws-tester .big { font-size: 22px; font-weight: 700; justify-content: center; margin-top: 6px; color: #fff; }
.ws-tester .bad { color: #ff8b8f; } .ws-tester .warn { color: #ffd76a; }
/* light switch panel */
.ws-switch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; }
.ws-sb { min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); font-family: var(--hd); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 6px; }
.ws-sb.on { background: rgba(242,194,26,.2); border-color: #f2c21a; color: #ffe08a; box-shadow: 0 0 12px rgba(242,194,26,.35); }
.ws-sb.walk { background: rgba(74,163,255,.14); border-color: var(--info); }
.ws-lightp { gap: 8px; min-width: min(620px, 94vw); }
.ws-lightp small { text-align: center; }
@media (max-height: 520px) {
  .ws-tick { min-height: 44px; padding: 6px 10px 6px 38px; } .ws-tick b { font-size: 15px; } .ws-tick small { display: none; }
  .ws-panel { gap: 6px; } .ws-dash { grid-template-columns: 70px auto 120px; padding: 6px 12px; gap: 10px; } .ws-gauge { width: 62px; height: 62px; } .ws-gauge b { font-size: 16px; }
  .ws-eye { width: 110px; height: 110px; } .ws-refr p { display: none; } .ws-tester div { font-size: 13px; } .ws-tester .big { font-size: 18px; margin-top: 2px; }
  .ws-sb { min-height: 40px; font-size: 13px; } .ws-switch { gap: 4px; } .ws-lightp small { display: none; }
  .ws-wait { gap: 4px; } .ws-note { font-size: 13px; min-height: 0; }
}