/* Real-circuit track car picker — shared component.
 *
 * Hosted on /live (real-track source toggle) and Settings → Account.
 * Layout has two modes:
 *   - resting   : single-line "Driving the X [Edit]" affordance
 *   - editing   : dropdown + "Other (free text)" reveal + Save / Cancel
 *
 * Visual hierarchy uses the v2 token system from /static/tokens.css so
 * the component naturally re-tints with body.theme-circuit (sim orange
 * → real-circuit green) without component-level overrides.
 */

.track-car-picker{
  display:flex;flex-direction:column;gap:8px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:10px;padding:14px 16px;
  font-family:var(--body);color:var(--text);
}

.tcp-label{
  font-family:var(--mono);font-size:11px;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);
}

/* ── Resting state — current car + Edit affordance ───────────────── */
.tcp-resting{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;font-size:15px;color:var(--text);
}
.tcp-resting-car{display:flex;flex-direction:column;gap:2px;min-width:0}
.tcp-resting-car .tcp-make{
  font-family:var(--mono);font-size:11px;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);
}
.tcp-resting-car .tcp-model{
  font-weight:600;font-size:16px;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tcp-resting-car .tcp-other-flag{
  font-family:var(--mono);font-size:10px;color:var(--faint);
  letter-spacing:0.12em;text-transform:uppercase;margin-top:2px;
}
.tcp-edit-btn{
  background:transparent;border:1px solid var(--border);
  color:var(--muted);border-radius:6px;
  padding:7px 12px;font-family:var(--mono);font-size:11px;
  letter-spacing:0.14em;text-transform:uppercase;
  cursor:pointer;transition:all 0.15s;flex-shrink:0;
  min-height:36px;
}
.tcp-edit-btn:hover{color:var(--orange);border-color:var(--orange)}
body.theme-circuit .tcp-edit-btn:hover{color:var(--green);border-color:var(--green)}

/* ── Editing state — dropdown + Other reveal + actions ───────────── */
.tcp-editing{display:flex;flex-direction:column;gap:10px}
.tcp-select{
  width:100%;padding:10px 12px;
  background:var(--surface-2);color:var(--text);
  border:1px solid var(--border);border-radius:6px;
  font-family:inherit;font-size:14px;
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23a8a8b8' d='M6 8L0 0h12z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:36px;
  cursor:pointer;
}
.tcp-select:focus{
  border-color:var(--orange);
  box-shadow:0 0 0 2px rgba(255,128,0,0.18);
  outline:none;
}
body.theme-circuit .tcp-select:focus{
  border-color:var(--green);
  box-shadow:0 0 0 2px rgba(0,200,100,0.18);
}

.tcp-other-input-wrap{display:none;flex-direction:column;gap:4px}
.tcp-other-input-wrap.is-visible{display:flex}
.tcp-other-input{
  width:100%;padding:10px 12px;
  background:var(--surface-2);color:var(--text);
  border:1px solid var(--border);border-radius:6px;
  font-family:inherit;font-size:14px;
}
.tcp-other-input:focus{
  border-color:var(--orange);
  box-shadow:0 0 0 2px rgba(255,128,0,0.18);
  outline:none;
}
body.theme-circuit .tcp-other-input:focus{
  border-color:var(--green);
  box-shadow:0 0 0 2px rgba(0,200,100,0.18);
}
.tcp-other-hint{
  font-family:var(--mono);font-size:10px;
  letter-spacing:0.10em;text-transform:uppercase;color:var(--faint);
}

.tcp-actions{display:flex;gap:8px;justify-content:flex-end}
.tcp-btn{
  padding:9px 16px;border-radius:6px;
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;
  cursor:pointer;border:1px solid transparent;transition:all 0.15s;
  min-height:38px;
}
.tcp-btn-save{
  background:var(--orange);color:var(--bg);border-color:var(--orange);
}
.tcp-btn-save:hover:not(:disabled){filter:brightness(1.1)}
.tcp-btn-save:disabled{opacity:0.5;cursor:not-allowed}
body.theme-circuit .tcp-btn-save{
  background:var(--green);border-color:var(--green);
}
.tcp-btn-cancel{
  background:transparent;color:var(--muted);border-color:var(--border);
}
.tcp-btn-cancel:hover{color:var(--text);border-color:var(--muted)}

.tcp-error{
  font-size:12px;color:var(--red);
  padding:6px 0;display:none;
}
.tcp-error.is-visible{display:block}

/* Loading state — kept simple, just dims while fetch/save in-flight */
.tcp-loading{opacity:0.55;pointer-events:none}

/* Empty-state copy when no car is set yet — replaces .tcp-resting */
.tcp-empty{
  display:none;flex-direction:column;gap:6px;
  padding:4px 0;
}
.tcp-empty.is-visible{display:flex}
.tcp-empty-headline{
  font-size:15px;font-weight:600;color:var(--text);
}
.tcp-empty-sub{
  font-size:13px;color:var(--muted);line-height:1.5;
}
.tcp-empty .tcp-edit-btn{align-self:flex-start;margin-top:2px}

/* ── Tyre compound segmented picker (in the standby car editor) ──────── */
.ll-tyre-picker{
  margin-top:14px;display:flex;flex-direction:column;gap:8px;
}
.ll-tyre-label{
  font-family:var(--mono);font-size:12px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--muted);
}
.ll-tyre-seg{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
}
.ll-tyre-opt{
  padding:10px 8px;border:1px solid var(--border);border-radius:8px;
  background:rgba(255,255,255,0.02);color:var(--text);
  font-size:14px;font-weight:600;cursor:pointer;transition:all 0.15s;
}
.ll-tyre-opt:hover{border-color:var(--muted)}
.ll-tyre-opt.selected{
  background:var(--green,#22c55e);border-color:var(--green,#22c55e);
  color:#04210f;
}
.ll-tyre-hint{
  font-size:12px;color:var(--muted);line-height:1.4;
}