/* Tire Shop Simulator Tycoon - panels for the chassis Precision Work Views (work/align.js, brakes.js, inspect.js, roadtest.js):
   the aligner screen, the live adjustment rows, the printout, brake gauges and records, the inspection report and the
   road-test controls. Classes start with wc-. */
.wc-panel { gap: 8px; min-width: min(640px, 94vw); max-height: calc(100vh - 210px); overflow: auto; }
.wc-mini { flex-direction: row; gap: 12px; }
.wc-lbl { text-align: center; }
.wc-note { margin: 0; font-size: 14px; color: var(--muted); }
/* ---------- aligner screen */
.wc-scr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; border-radius: 10px; background: #0b1622; border: 1px solid #1f3a55; font-family: var(--hd); }
.wc-h { grid-column: 1 / -1; text-align: center; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #9fc7ee; font-size: 13px; }
.wc-blk h5 { margin: 0 0 4px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--acc); }
.wc-grid { display: grid; grid-template-columns: auto 1fr 1fr; gap: 4px 6px; align-items: center; }
.wc-k { font-size: 13px; color: #9fb3c8; white-space: nowrap; }
.wc-c { font-size: 11px; color: #6c8299; text-align: center; letter-spacing: .12em; text-transform: uppercase; }
.wc-span { grid-column: 2 / 4; }
.wc-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px 6px 4px; border-radius: 7px; background: #0f2131; border: 1px solid #1d3348; min-width: 0; }
.wc-cell small { font-size: 11px; color: #6c8299; }
.wc-cell b { font-family: var(--mono); font-weight: 500; font-size: 15px; line-height: 1.1; }
.wc-cell i { position: relative; display: block; width: 100%; height: 6px; border-radius: 3px; }
.wc-cell em { position: absolute; top: -3px; width: 3px; height: 12px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 6px #fff; border-radius: 2px; }
.wc-cell.z-green { border-color: #1f7a4a; } .wc-cell.z-green b { color: #5fe39a; }
.wc-cell.z-yellow { border-color: #8a6d12; } .wc-cell.z-yellow b { color: #f6d35a; }
.wc-cell.z-red { border-color: #8a2a28; background: #2a1416; } .wc-cell.z-red b { color: #ff7d74; }
.wc-foot { grid-column: 1 / -1; text-align: center; font-size: 14px; color: #c9d6e2; }
.wc-q { font-style: italic; font-family: var(--bd, inherit); }
.z-green { color: #5fe39a; } .z-yellow { color: #f6d35a; } .z-red { color: #ff7d74; }
.wc-scr.compact { padding: 6px; gap: 6px; } .wc-scr.compact .wc-cell b { font-size: 13px; } .wc-scr.compact .wc-k { font-size: 12px; }
/* diagnosis buttons under the screen */
.wc-diag { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
/* ---------- live adjustment */
.wc-adj { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 8px 12px; }
.wc-arow { display: grid; grid-template-columns: 52px 1fr 52px; grid-template-rows: auto auto; gap: 2px 6px; align-items: center; }
.wc-al { grid-column: 1 / -1; text-align: center; font-family: var(--hd); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.wc-arow .wv-btn { width: 52px; min-height: 52px; padding: 0; font-size: 22px; touch-action: none; user-select: none; -webkit-user-select: none; }
.wc-arow .wc-av .wc-cell b { font-size: 20px; } .wc-arow .wc-av .wc-cell i { height: 9px; } .wc-arow .wc-av .wc-cell em { height: 15px; }
.wc-info { text-align: center; font-size: 14px; color: #c9d6e2; min-height: 18px; }
.wc-info b { font-weight: 700; }
.wc-done { align-self: center; min-width: 170px; }
.wc-panel > .wc-done { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -6px 16px rgba(16,21,27,.85); }
/* ---------- printout */
.wc-printp { min-width: min(820px, 96vw); }
.wc-print { background: #f4f2ec; color: #1b1d20; border-radius: 6px; padding: 10px; }
.wc-ph { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #1b1d20; margin-bottom: 8px; padding-bottom: 4px; font-family: var(--hd); }
.wc-ph b { font-size: 18px; text-transform: uppercase; letter-spacing: .08em; } .wc-ph span { font-size: 13px; }
.wc-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wc-ba .wc-scr { grid-template-columns: 1fr; }
.wc-print .wc-note { color: #5a3a10; margin-top: 6px; }
/* ---------- gauges, records and checklists (brakes, inspection, road test) */
.wc-rec { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 8px; }
.wc-recq { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); }
.wc-recq > b { font-family: var(--hd); font-size: 15px; letter-spacing: .04em; } .wc-recq > small { color: var(--muted); font-size: 12.5px; }
.wc-seg { display: flex; gap: 4px; }
.wc-seg button { flex: 1; min-height: 44px; border-radius: 8px; border: 1px solid var(--line); background: #1a2028; color: var(--text); font-family: var(--hd); font-weight: 700; font-size: 15px; }
.wc-seg button.on { color: #fff; border-color: #fff; }
.wc-seg button[data-v="green"].on, .wc-seg button.g.on { background: #1d7a48; } .wc-seg button[data-v="yellow"].on, .wc-seg button.y.on { background: #9a7a10; } .wc-seg button[data-v="red"].on, .wc-seg button.r.on { background: #a32d2a; }
.wc-seg button.n.on { background: #2b5f9a; }
.wc-checks { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 8px; }
.wc-tick { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); text-align: left; font-family: var(--hd); font-size: 16px; font-weight: 700; }
.wc-tick i { font-style: normal; width: 26px; text-align: center; font-size: 18px; color: var(--muted); }
.wc-tick.on { border-color: var(--acc); background: rgba(255,107,26,.16); } .wc-tick.on i { color: var(--acc); }
/* ---------- digital inspection */
.wc-dvi { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.wc-dvi .wc-seg { min-width: 300px; }
.wc-dvi .wc-seg button { min-height: 56px; font-size: 17px; }
.wc-dvi .wc-seg button[data-v="green"] { border-color: #1d7a48; } .wc-dvi .wc-seg button[data-v="yellow"] { border-color: #9a7a10; } .wc-dvi .wc-seg button[data-v="red"] { border-color: #a32d2a; }
.wc-shots { display: flex; gap: 6px; flex-wrap: wrap; }
.wc-shot { display: flex; flex-direction: column; padding: 4px 8px; border-radius: 8px; background: #0f2131; border: 1px solid #1d3348; font-size: 12.5px; }
.wc-shot b { font-family: var(--mono); font-weight: 500; font-size: 14px; } .wc-shot.bad b { color: #ff7d74; } .wc-shot.warn b { color: #f6d35a; } .wc-shot.good b { color: #5fe39a; }
.wc-report { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.wc-report div { display: flex; justify-content: space-between; gap: 6px; padding: 6px 10px; border-radius: 8px; background: var(--panel2); border-left: 5px solid #555; font-size: 14px; }
.wc-report div.green { border-left-color: #2fbf71; } .wc-report div.yellow { border-left-color: #f2c21a; } .wc-report div.red { border-left-color: #e0453a; }
.wc-report em { font-style: normal; font-family: var(--hd); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .1em; color: var(--muted); }
/* ---------- road test */
.wc-drive { display: grid; grid-template-columns: 64px 64px 1fr 96px 96px; gap: 8px; align-items: center; min-width: min(640px, 94vw); }
.wc-drive .wv-btn { min-height: 64px; padding: 0; font-size: 18px; touch-action: none; user-select: none; -webkit-user-select: none; }
.wc-drive .wv-btn.down { filter: brightness(1.35); transform: scale(.96); }
.wc-drive .wc-gas { background: linear-gradient(var(--go), var(--go2)); border-color: #167544; color: #fff; }
.wc-drive .wc-brk { background: linear-gradient(#c4353a, #8e1f22); border-color: #6e1518; color: #fff; }
.wc-mid { display: flex; flex-direction: column; gap: 4px; align-items: stretch; text-align: center; }
.wc-mid output { font-family: var(--mono); font-size: 22px; }
.wc-mid .wv-bar { height: 14px; }
.wc-mid small { color: var(--muted); font-size: 12.5px; }
@media (max-height: 520px) {
  .wc-panel { max-height: calc(100vh - 140px); gap: 6px; }
  .wc-scr { gap: 2px 8px; padding: 4px 6px; } .wc-grid { gap: 2px 4px; } .wc-cell { padding: 0 4px 1px; flex-direction: row; justify-content: center; } .wc-cell b { font-size: 12.5px; } .wc-k { font-size: 11px; } .wc-c { font-size: 10px; } .wc-blk h5 { font-size: 10.5px; margin-bottom: 1px; } .wc-h { font-size: 11px; }
  .wc-scr .wc-cell i { display: none; } .wc-arow .wc-av .wc-cell { flex-direction: column; } .wc-arow .wc-av .wc-cell i { display: block; } .wc-foot { font-size: 12px; } .wc-lbl { font-size: 13px; }
  .wc-diag { gap: 4px; } .wc-diag .wv-opt { min-height: 44px; padding: 4px; } .wc-diag .wv-opt small { display: none; }
  .wc-arow .wv-btn { min-height: 44px; width: 46px; } .wc-arow { grid-template-columns: 46px 1fr 46px; } .wc-arow .wc-av .wc-cell b { font-size: 16px; }
  .wc-seg button { min-height: 40px; font-size: 14px; } .wc-dvi .wc-seg button { min-height: 44px; } .wc-dvi .wc-seg { min-width: 240px; }
  .wc-recq { padding: 5px; } .wc-recq > small { display: none; }
  .wc-tick { min-height: 42px; font-size: 14px; padding: 4px 10px; }
  .wc-drive { grid-template-columns: 52px 52px 1fr 80px 80px; } .wc-drive .wv-btn { font-size: 16px; } .wc-drive .wv-btn { min-height: 52px; }
  .wc-report div { padding: 3px 8px; font-size: 13px; }
}