/* /tint-simulator — page-specific styles.
   Scoped under #tsim so nothing reaches the shared chrome, and built from the
   site's own tokens rather than a standalone palette. Loaded only by this page
   via extraHead; hashed by bust.js. */

#tsim{--t-line:var(--ink-700);--t-accent:var(--blue-500);--t-warn:#ffb020;--t-ok:#35c98e;--t-bad:#ff7a70}

/* ---- vehicle picker ---- */
#tsim .vehrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
#tsim .vehbtn{background:transparent;border:1px solid var(--t-line);color:var(--text-inv-2);
  border-radius:999px;padding:9px 17px;font:600 13.5px var(--font-body);cursor:pointer}
#tsim .vehbtn[aria-selected="true"]{background:#fff;border-color:#fff;color:var(--ink-900)}
#tsim .vehnote{margin:11px 0 0;font-size:12.5px;color:var(--text-inv-2);line-height:1.6}

#tsim .stage{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--t-line);
  background:#0a0c0e;aspect-ratio:1672/941}
/* Each vehicle is a full pair of stacks; only the chosen one is in the flow.
   Its frames are lazy, and a lazy image under display:none is not fetched, so
   the other vehicles cost nothing until they are asked for. */
#tsim .veh{position:absolute;inset:0}
#tsim .veh[hidden]{display:none}
/* Every shade is stacked; only the active one is opaque. Cross-fading between
   two of them is what makes five stills read as a continuous slider. */
/* Two copies of the same five frames, each clipped to its half of the car
   at the B-pillar. The frames are identical outside the glass, so the cut is
   invisible; the browser fetches each file once, so ten tags cost five
   downloads. */
#tsim .half{position:absolute;inset:0}
#tsim .half img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .12s linear}
#tsim .half img.on{opacity:1}

#tsim .hold{position:absolute;right:12px;top:12px;background:rgba(14,16,19,.72);
  border:1px solid var(--t-line);color:#fff;border-radius:9px;padding:9px 14px;
  font:600 12.5px var(--font-body);cursor:pointer;user-select:none;z-index:3;-webkit-tap-highlight-color:transparent}
#tsim .hold:active{background:var(--blue-700);border-color:var(--blue-700)}

#tsim .badge{position:absolute;left:12px;top:12px;z-index:3;background:rgba(14,16,19,.72);
  border:1px solid var(--t-line);border-radius:9px;padding:9px 14px;color:#fff;
  font:700 13px var(--font-display);letter-spacing:.02em}
#tsim .badge span{color:var(--text-inv-2);font-weight:400;font-size:12px}
#tsim .badge .sep{font-style:normal}

#tsim .panel{margin-top:16px;background:var(--ink-900);border:1px solid var(--t-line);
  border-radius:14px;padding:20px 22px;display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center}
@media(max-width:680px){#tsim .panel{grid-template-columns:1fr;gap:16px}}

#tsim .lstat.ok{color:var(--t-ok)}
#tsim .lstat.bad{color:var(--t-bad)}

#tsim .slider-zone{position:relative;padding-top:30px}
#tsim input[type=range]{width:100%;accent-color:var(--blue-500);height:36px;cursor:pointer}
#tsim .ticks{position:relative;height:18px;font-size:11px;color:var(--text-inv-2)}
#tsim .ticks span{position:absolute;transform:translateX(-50%)}
#tsim .legal-line{position:absolute;top:0;transform:translateX(-50%);text-align:center;
  color:var(--t-warn);font-size:11px;font-weight:700;white-space:nowrap}
#tsim .legal-line::after{content:"";display:block;width:2px;height:22px;background:var(--t-warn);margin:3px auto 0}

#tsim .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
#tsim .chip-t{background:transparent;border:1px solid var(--t-line);color:var(--text-inv-2);
  border-radius:999px;padding:8px 15px;font:600 13px var(--font-body);cursor:pointer}
#tsim .chip-t[aria-pressed="true"]{background:var(--blue-700);border-color:var(--blue-700);color:#fff}
/* Really disabled, not just faded: pointer-events:none alone left them
   reachable by keyboard, so Tab and Enter still fired a preset the UI was
   telling the customer was off. */
#tsim .chip-t:disabled{opacity:.4;cursor:default}
#tsim .chipnote{margin:9px 0 0;font-size:12px;color:var(--text-inv-2)}
#tsim:not(.unlinked) .chipnote{display:none}

#tsim .disclaimer{margin-top:18px;font-size:12.5px;color:var(--text-inv-2);line-height:1.65}
#tsim .disclaimer b{color:var(--t-warn)}

@media(max-width:560px){
  #tsim .badge{left:10px;right:auto;top:auto;bottom:10px;font-size:11.5px;padding:7px 11px;max-width:calc(100% - 20px)}
  /* The second half drops to its own line here, so the separator that reads
     correctly inline ("Front 80% · Rear 5%") would start the new line with a
     stray middot. Hide it once it is no longer separating anything. */
  #tsim .badge span{display:block;margin-top:1px}
  #tsim .badge .sep{display:none}
  #tsim .hold{right:10px;top:10px;padding:8px 12px;font-size:12px}
  #tsim .legal-line{transform:none;text-align:left;font-size:10.5px}
  #tsim .legal-line::after{margin:3px 0 0}
  #tsim .slider-zone{padding-top:34px}
}

/* ---- front / rear controls ---- */
#tsim .controls{display:grid;gap:16px}
/* Two visible choices, not a ticked box. The box said "Move front and rear
   together" in its on state, which tells the customer where they are and
   nothing about where else they could go — the split control the intro
   advertises was effectively hidden behind it. */
#tsim .moderow{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--t-line);border-radius:999px}
#tsim .modebtn{background:transparent;border:0;color:var(--text-inv-2);border-radius:999px;
  padding:8px 15px;font:600 12.5px var(--font-body);cursor:pointer;white-space:nowrap}
#tsim .modebtn[aria-selected="true"]{background:var(--blue-700);color:#fff}
@media(max-width:560px){
  #tsim .moderow{display:grid;grid-template-columns:1fr 1fr;width:100%}
  #tsim .modebtn{padding:9px 6px;font-size:12px;white-space:normal}
}

#tsim .sliderline{display:grid;gap:2px}
#tsim .slabel{display:flex;justify-content:space-between;align-items:baseline;
  font-size:12.5px;color:var(--text-inv-2);text-transform:uppercase;letter-spacing:.05em}
#tsim .slabel b{font-family:var(--font-display);font-size:22px;color:#fff;letter-spacing:-.5px;
  text-transform:none;font-variant-numeric:tabular-nums}
/* Deliberately not called .legal: that is a site-wide caution panel — a
   red-tinted box with a border — and reusing the name put the green
   "Legal ✓" line inside a red warning box on every page load. */
#tsim .sliderline .lstat{font-size:12px;font-weight:600;margin-top:2px}
#tsim .lstat.warn{color:var(--t-warn)}

/* Linked is the default, so the rear row is redundant noise until the
   customer asks for a split job. */
#tsim:not(.unlinked) #lineRear{display:none}
/* One slider drives both by default, so the row must not claim to be the
   front only. This is real markup rather than a ::after on a bare span: the
   label is a flex row, and splitting "Front windows" into two flex items
   spread the two words to opposite ends of it. */
#tsim .slabel i{font-style:normal}
#tsim.unlinked #lineFront .also{display:none}

@media(max-width:560px){
  #tsim .slabel b{font-size:19px}
}