/* TSL Phase 9 v0.1 - automatic Driver Rating */
#tracks.tracks-modern .tsl-driver-rating {
  margin-top: 30px;
  padding: 0;
}

#tracks.tracks-modern .tsl-driver-rating__heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

#tracks.tracks-modern .tsl-driver-rating__heading h3 {
  margin: 4px 0 0;
  color: var(--tsl-ink, #171a1f);
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: -.015em;
}

#tracks.tracks-modern .tsl-driver-rating__sample {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid #dfe3e8;
  border-radius: 999px;
  background: #f7f8fa;
  color: #697386;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

#tracks.tracks-modern .tsl-driver-rating__sample--tba {
  background: #171a1f;
  border-color: #171a1f;
  color: #fff;
}

#tracks.tracks-modern .tsl-rating-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

#tracks.tracks-modern .tsl-rating-card {
  position: relative;
  min-width: 0;
  padding: 17px 18px 16px;
  overflow: hidden;
  border: 1px solid #e1e5ea;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(18, 24, 32, .045);
}

#tracks.tracks-modern .tsl-rating-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: #ff2449;
  content: "";
}

#tracks.tracks-modern .tsl-rating-card--awareness::before { background: #2aa46f; }
#tracks.tracks-modern .tsl-rating-card--race-craft::before { background: #ff2449; }
#tracks.tracks-modern .tsl-rating-card--pace::before { background: #7656e8; }
#tracks.tracks-modern .tsl-rating-card--experience::before { background: #4378d8; }

#tracks.tracks-modern .tsl-rating-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 13px;
}

#tracks.tracks-modern .tsl-rating-card__code {
  color: #9aa3b1;
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .12em;
}

#tracks.tracks-modern .tsl-rating-card__info {
  display: inline-flex;
  width: 21px;
  height: 21px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f1f3f6;
  color: #7d8796;
  cursor: help;
  font-size: .7rem;
  font-weight: 900;
}

#tracks.tracks-modern .tsl-rating-card__label {
  color: #525d6c;
  font-size: .78rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .04em;
}

#tracks.tracks-modern .tsl-rating-card__value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 5px 0 10px;
}

#tracks.tracks-modern .tsl-rating-card__value strong {
  color: #15181d;
  font-size: 2rem;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.055em;
}

#tracks.tracks-modern .tsl-rating-card__value span {
  color: #a0a7b2;
  font-size: .72rem;
  font-weight: 800;
}

#tracks.tracks-modern .tsl-rating-card__bar {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf0f3;
}

#tracks.tracks-modern .tsl-rating-card__bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #ff2449;
}

#tracks.tracks-modern .tsl-rating-card--awareness .tsl-rating-card__bar i { background: #2aa46f; }
#tracks.tracks-modern .tsl-rating-card--race-craft .tsl-rating-card__bar i { background: #ff2449; }
#tracks.tracks-modern .tsl-rating-card--pace .tsl-rating-card__bar i { background: #7656e8; }
#tracks.tracks-modern .tsl-rating-card--experience .tsl-rating-card__bar i { background: #4378d8; }

#tracks.tracks-modern .tsl-rating-card__grade {
  margin-top: 8px;
  color: #7c8592;
  font-size: .7rem;
  font-weight: 800;
}

#tracks.tracks-modern .tsl-driver-rating__note {
  margin-top: 11px;
  padding: 10px 12px;
  border-radius: 9px;
  background: #f6f7f9;
  color: #7a8491;
  font-size: .72rem;
  line-height: 1.45;
}

#tracks.tracks-modern .tsl-rating-tba {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(180px, 280px);
  gap: 18px;
  align-items: center;
  padding: 19px 20px;
  border: 1px solid #e0e4e9;
  border-left: 4px solid #aab2bd;
  border-radius: 14px;
  background: #fafbfc;
}

#tracks.tracks-modern .tsl-rating-tba__mark {
  color: #b4bbc4;
  font-size: 1.55rem;
  font-weight: 950;
  letter-spacing: -.04em;
}

#tracks.tracks-modern .tsl-rating-tba__copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#tracks.tracks-modern .tsl-rating-tba__copy strong {
  color: #20242a;
  font-size: .92rem;
}

#tracks.tracks-modern .tsl-rating-tba__copy span {
  color: #7b8490;
  font-size: .76rem;
}

#tracks.tracks-modern .tsl-rating-tba__progress > span {
  display: block;
  margin-bottom: 6px;
  color: #6e7783;
  font-size: .7rem;
  font-weight: 800;
  text-align: right;
  text-transform: uppercase;
}

#tracks.tracks-modern .tsl-rating-tba__progress > div {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6e9ed;
}

#tracks.tracks-modern .tsl-rating-tba__progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #a8b0bb;
}

@media (max-width: 900px) {
  #tracks.tracks-modern .tsl-rating-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #tracks.tracks-modern .tsl-rating-tba {
    grid-template-columns: auto 1fr;
  }
  #tracks.tracks-modern .tsl-rating-tba__progress {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  #tracks.tracks-modern .tsl-driver-rating__heading {
    align-items: flex-start;
    flex-direction: column;
  }
  #tracks.tracks-modern .tsl-rating-grid {
    grid-template-columns: 1fr;
  }
  #tracks.tracks-modern .tsl-rating-tba {
    grid-template-columns: 1fr;
  }
  #tracks.tracks-modern .tsl-rating-tba__progress {
    grid-column: auto;
  }
  #tracks.tracks-modern .tsl-rating-tba__progress > span {
    text-align: left;
  }
}


/* TSL Phase 20 v0.10 - Driver Rating Compare */
#tracks.tracks-modern .tsl-driver-rating__actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
#tracks.tracks-modern .tsl-rating-compare-button{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  gap:6px;
  padding:5px 12px;
  border:1px solid #d9dee5;
  border-radius:999px;
  background:#fff;
  color:#414a57;
  cursor:pointer;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.045em;
  text-transform:uppercase;
  transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease;
}
#tracks.tracks-modern .tsl-rating-compare-button:hover,
#tracks.tracks-modern .tsl-rating-compare-button.is-active{
  border-color:#171a1f;
  background:#171a1f;
  color:#fff;
}
#tracks.tracks-modern .tsl-rating-compare-button__icon{font-size:1rem;line-height:1}
#tracks.tracks-modern .tsl-rating-compare-picker{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,360px) auto;
  gap:14px;
  align-items:end;
  margin:0 0 14px;
  padding:14px 16px;
  border:1px solid #e0e4e9;
  border-radius:12px;
  background:#f8f9fb;
}
#tracks.tracks-modern .tsl-rating-compare-picker[hidden]{display:none!important}
#tracks.tracks-modern .tsl-rating-compare-picker__copy{display:flex;flex-direction:column;gap:3px}
#tracks.tracks-modern .tsl-rating-compare-picker__copy strong{color:#252a31;font-size:.84rem}
#tracks.tracks-modern .tsl-rating-compare-picker__copy span{color:#7a8492;font-size:.72rem;line-height:1.35}
#tracks.tracks-modern .tsl-rating-compare-picker__select{display:flex;flex-direction:column;gap:5px;margin:0}
#tracks.tracks-modern .tsl-rating-compare-picker__select>span{color:#84909f;font-size:.63rem;font-weight:900;letter-spacing:.1em}
#tracks.tracks-modern .tsl-rating-compare-picker__select select{
  width:100%;height:38px;padding:0 34px 0 11px;border:1px solid #d8dde4;border-radius:8px;background:#fff;color:#303741;font-weight:750;
}
#tracks.tracks-modern .tsl-rating-compare-clear{
  height:38px;padding:0 12px;border:1px solid #d8dde4;border-radius:8px;background:#fff;color:#697386;cursor:pointer;font-size:.7rem;font-weight:850;
}
#tracks.tracks-modern .tsl-rating-comparison{
  margin-bottom:14px;
  padding:16px;
  border:1px solid #e0e4e9;
  border-radius:14px;
  background:#fbfcfd;
}
#tracks.tracks-modern .tsl-rating-comparison__header{
  display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px;
}
#tracks.tracks-modern .tsl-rating-comparison__header>div:first-child{display:flex;flex-direction:column;gap:3px;min-width:0}
#tracks.tracks-modern .tsl-rating-comparison__header>div:first-child>span{color:#ff2449;font-size:.65rem;font-weight:950;letter-spacing:.11em}
#tracks.tracks-modern .tsl-rating-comparison__header>div:first-child>strong{color:#252a31;font-size:1.02rem;white-space:normal}
#tracks.tracks-modern .tsl-rating-comparison__header em{margin:0 7px;color:#a1a8b3;font-size:.68rem;font-style:normal;font-weight:950}
#tracks.tracks-modern .tsl-rating-comparison__overall{
  display:grid;grid-template-columns:minmax(90px,1fr) auto minmax(90px,1fr);align-items:center;gap:10px;min-width:340px;
}
#tracks.tracks-modern .tsl-rating-comparison__overall>div{display:flex;align-items:baseline;gap:7px;justify-content:flex-end}
#tracks.tracks-modern .tsl-rating-comparison__overall>div:last-child{justify-content:flex-start}
#tracks.tracks-modern .tsl-rating-comparison__overall span{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#7a8491;font-size:.66rem;font-weight:800}
#tracks.tracks-modern .tsl-rating-comparison__overall strong{color:#20242a;font-size:1.55rem;font-weight:950;letter-spacing:-.04em}
#tracks.tracks-modern .tsl-rating-comparison__overall b{padding:4px 7px;border-radius:999px;background:#eef1f4;color:#7e8794;font-size:.57rem;letter-spacing:.08em}
#tracks.tracks-modern .tsl-rating-comparison__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#tracks.tracks-modern .tsl-rating-compare-card{
  position:relative;overflow:hidden;padding:13px;border:1px solid #e2e6eb;border-radius:12px;background:#fff;
}
#tracks.tracks-modern .tsl-rating-compare-card:before{position:absolute;top:0;left:0;right:0;height:3px;background:#ff2449;content:""}
#tracks.tracks-modern .tsl-rating-compare-card--awareness:before{background:#2aa46f}
#tracks.tracks-modern .tsl-rating-compare-card--race-craft:before{background:#ff2449}
#tracks.tracks-modern .tsl-rating-compare-card--pace:before{background:#7656e8}
#tracks.tracks-modern .tsl-rating-compare-card--experience:before{background:#4378d8}
#tracks.tracks-modern .tsl-rating-compare-card__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
#tracks.tracks-modern .tsl-rating-compare-card__head>div{display:flex;align-items:baseline;gap:6px;min-width:0}
#tracks.tracks-modern .tsl-rating-compare-card__head>div span{color:#98a2af;font-size:.62rem;font-weight:950;letter-spacing:.1em}
#tracks.tracks-modern .tsl-rating-compare-card__head>div strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#535e6d;font-size:.72rem;text-transform:uppercase}
#tracks.tracks-modern .tsl-rating-compare-card__diff{flex:0 0 auto;padding:3px 6px;border-radius:999px;background:#f0f2f5;color:#78818d;font-size:.6rem;font-weight:950}
#tracks.tracks-modern .tsl-rating-compare-card__diff.is-positive{background:#eaf7f1;color:#20805a}
#tracks.tracks-modern .tsl-rating-compare-card__diff.is-negative{background:#fff0f2;color:#d92e49}
#tracks.tracks-modern .tsl-rating-compare-card__driver{padding:8px 0}
#tracks.tracks-modern .tsl-rating-compare-card__driver+.tsl-rating-compare-card__driver{border-top:1px solid #edf0f3}
#tracks.tracks-modern .tsl-rating-compare-card__name{min-height:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#737d8a;font-size:.64rem;font-weight:800}
#tracks.tracks-modern .tsl-rating-compare-card__value{display:flex;align-items:baseline;gap:3px;margin:2px 0 6px}
#tracks.tracks-modern .tsl-rating-compare-card__value strong{color:#171a1f;font-size:1.35rem;font-weight:950;letter-spacing:-.04em}
#tracks.tracks-modern .tsl-rating-compare-card__value span{color:#a0a7b2;font-size:.6rem;font-weight:800}
#tracks.tracks-modern .tsl-rating-compare-card__bar{height:5px;overflow:hidden;border-radius:999px;background:#edf0f3}
#tracks.tracks-modern .tsl-rating-compare-card__bar i{display:block;height:100%;border-radius:inherit;background:#252a31}
#tracks.tracks-modern .tsl-rating-compare-card__bar.is-secondary i{opacity:.38}
#tracks.tracks-modern .tsl-rating-compare-card--awareness .tsl-rating-compare-card__bar i{background:#2aa46f}
#tracks.tracks-modern .tsl-rating-compare-card--race-craft .tsl-rating-compare-card__bar i{background:#ff2449}
#tracks.tracks-modern .tsl-rating-compare-card--pace .tsl-rating-compare-card__bar i{background:#7656e8}
#tracks.tracks-modern .tsl-rating-compare-card--experience .tsl-rating-compare-card__bar i{background:#4378d8}
#tracks.tracks-modern .tsl-rating-comparison__unavailable{display:flex;flex-direction:column;gap:3px;padding:14px;border-radius:10px;background:#f3f5f7;color:#717b88;font-size:.74rem}
#tracks.tracks-modern .tsl-rating-comparison__unavailable strong{color:#343a43}
@media(max-width:900px){
  #tracks.tracks-modern .tsl-rating-comparison__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #tracks.tracks-modern .tsl-rating-compare-picker{grid-template-columns:1fr 1fr}
  #tracks.tracks-modern .tsl-rating-compare-picker__copy{grid-column:1/-1}
  #tracks.tracks-modern .tsl-rating-comparison__header{align-items:flex-start;flex-direction:column}
  #tracks.tracks-modern .tsl-rating-comparison__overall{width:100%;min-width:0}
}
@media(max-width:520px){
  #tracks.tracks-modern .tsl-driver-rating__actions{justify-content:flex-start}
  #tracks.tracks-modern .tsl-rating-compare-picker{grid-template-columns:1fr}
  #tracks.tracks-modern .tsl-rating-compare-picker__copy{grid-column:auto}
  #tracks.tracks-modern .tsl-rating-comparison__grid{grid-template-columns:1fr}
  #tracks.tracks-modern .tsl-rating-comparison__overall{grid-template-columns:1fr auto 1fr;gap:6px}
  #tracks.tracks-modern .tsl-rating-comparison__overall>div{align-items:flex-start;flex-direction:column;gap:1px}
  #tracks.tracks-modern .tsl-rating-comparison__overall>div:last-child{align-items:flex-end}
  #tracks.tracks-modern .tsl-rating-comparison__overall span{max-width:105px}
}