/* "Racing tyre strategy, explained": tyre chips, the one-stop/two-stop race, compound cards, degradation curves and the wet crossover. */

/* Tyre chips */
.ch-lap { color: var(--coral); font-variant-numeric: tabular-nums; }
.ch-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ch-chip { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 14px 18px; padding: 20px; border-radius: var(--radius-lg); background: var(--ink); box-shadow: inset 0 0 0 1px var(--rim); transition: box-shadow 300ms ease; }
.ch-chip.is-over { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soft) 60%, transparent); }
.ch-ring { width: 92px; height: 92px; }
.ch-ring circle { fill: none; stroke-width: 10; }
.ch-track { stroke: var(--raised); }
.ch-arc { stroke: var(--c); stroke-linecap: round; stroke-dasharray: 289.03; transform: rotate(-90deg); transform-origin: 60px 60px; }
.ch-ring text { fill: var(--text); font: 800 30px/1 Jakarta; }
.ch-text b { display: block; font: 800 19px/1.2 Jakarta; letter-spacing: -.02em; }
.ch-text span { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.ch-text span small { font: 700 11px/1 Jakarta; letter-spacing: .14em; text-transform: uppercase; color: var(--subtle); }
.ch-text em { font: 800 26px/1 Jakarta; font-style: normal; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ch-state { display: block; margin-top: 8px; font: 700 12px/1.2 Jakarta; color: var(--muted); }
.is-over .ch-state { color: var(--soft); }
.ch-spark { grid-column: 1 / -1; width: 100%; height: auto; overflow: visible; }
.ch-spark polyline { fill: none; stroke: var(--c); stroke-width: 2.5; stroke-linejoin: round; opacity: .55; }
.ch-spark circle { fill: var(--c); stroke: var(--ink); stroke-width: 2; }
.ch-cliff { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 3 4; }

/* One stop against two */
.sr-plans { display: grid; gap: 8px; }
.sr-plan { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 14px; }
.sr-plan small { font: 700 11px/1 Jakarta; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sr-bar { display: flex; gap: 4px; }
.sr-bar span { min-width: 0; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--c) 18%, var(--ink)); box-shadow: inset 3px 0 0 var(--c); font: 700 13px/1 Jakarta; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-winner="one"] .sr-plan.is-one small, [data-winner="two"] .sr-plan.is-two small { color: var(--coral); }
.sr-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 22px; }
.sr-controls .seg { flex-wrap: wrap; }
.sr-slider { display: grid; gap: 8px; flex: 1 1 220px; max-width: 340px; }
.sr-slider span { display: flex; justify-content: space-between; font: 700 11px/1 Jakarta; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sr-slider output { color: var(--text); font-variant-numeric: tabular-nums; }
.fig-stage input[type="range"] { width: 100%; accent-color: var(--coral); }
.sr-chart, .tc-chart, .cx-chart { display: block; width: 100%; height: auto; margin-top: 18px; overflow: visible; }
.sr-chart text, .tc-chart text, .cx-chart text { font: 600 12px/1 Jakarta; fill: var(--subtle); }
.sr-zero { stroke: var(--selected); stroke-width: 1.5; }
.sr-side { font-weight: 700 !important; letter-spacing: .1em; text-transform: uppercase; font-size: 11px !important; }
.sr-area { fill: color-mix(in srgb, var(--coral) 14%, transparent); }
.sr-line { fill: none; stroke: var(--coral); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.sr-head { fill: var(--coral); stroke: var(--ink); stroke-width: 3; }
.sr-tick line { stroke-width: 1.2; stroke-dasharray: 3 5; }
.sr-tick.is-one line { stroke: var(--medium); } .sr-tick.is-two line { stroke: var(--soft); }
.sr-tick text { font-size: 11px !important; font-weight: 700 !important; }
.sr-tick.is-one text { fill: var(--medium) !important; } .sr-tick.is-two text { fill: var(--soft) !important; }
.sr-verdict { margin-top: 10px; font: 600 17px/1.4 Jakarta; text-align: center; color: var(--muted); }
.sr-verdict b { color: var(--coral); }

/* Compound cards */
.tk-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tk-card { display: grid; align-content: start; gap: 16px; padding: 20px; border-radius: var(--radius-lg); background: var(--ink); box-shadow: inset 0 3px 0 var(--c), inset 0 0 0 1px var(--rim); }
.tk-card header { display: flex; align-items: center; gap: 12px; }
.tk-card header b { font: 800 20px/1 Jakarta; letter-spacing: -.02em; }
.tk-card dl { display: grid; gap: 10px; margin: 0; }
.tk-card dt { font: 700 11px/1 Jakarta; letter-spacing: .12em; text-transform: uppercase; color: var(--subtle); }
.tk-card dd { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: -4px 0 0; }
.tk-card dd em { font: 700 13px/1 Jakarta; font-style: normal; color: var(--text); white-space: nowrap; }
.tk-bar { position: relative; height: 6px; border-radius: 3px; background: var(--raised); overflow: hidden; }
.tk-bar::after { content: ''; position: absolute; inset: 0; width: var(--v); border-radius: 3px; background: var(--c); transform: scaleX(0); transform-origin: left; }
.is-in .tk-bar::after { transform: none; transition: transform 900ms var(--motion) calc(var(--i) * 120ms + 250ms); }
.tk-card p { font-size: 14px; line-height: 1.45; color: var(--muted); }
.tk-card p b { color: var(--text); }

/* Degradation curves */
.tc-lap { color: var(--coral); font-variant-numeric: tabular-nums; }
.tc-grid line { stroke: var(--rim); }
.tc-line { fill: none; stroke: var(--c); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-in .tc-line, .tc-chart.is-drawn .tc-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1600ms var(--motion); }
.tc-limit circle { fill: var(--ink); stroke: var(--c); stroke-width: 2.5; }
.tc-note text { fill: var(--muted) !important; font-weight: 700 !important; }
.tc-marker line { stroke: var(--coral); stroke-width: 1.5; stroke-dasharray: 4 4; }
.tc-marker circle { fill: var(--c); stroke: var(--ink); stroke-width: 3; }
.tc-scrub { margin-top: 10px; }
.tc-rows { display: grid; gap: 6px; margin-top: 16px; }
.tc-row { display: grid; grid-template-columns: 26px 80px 84px minmax(0, 1fr) 70px; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 14px; background: var(--ink); transition: background 200ms, opacity 200ms; }
.tc-row b { font: 800 15px/1 Jakarta; }
.tc-row [data-time] { font: 700 15px/1 Jakarta; font-variant-numeric: tabular-nums; }
.tc-row small { font: 600 12px/1 Jakarta; color: var(--muted); text-align: right; }
.tc-life { height: 6px; border-radius: 3px; background: var(--raised); overflow: hidden; }
.tc-life span { display: block; width: var(--life, 100%); height: 100%; border-radius: 3px; background: linear-gradient(90deg, #ef6262, #eec753 50%, #70dc91); background-size: 340px 100%; transition: width 200ms ease; }
.tc-row.is-best { background: color-mix(in srgb, var(--coral) 12%, var(--ink)); box-shadow: inset 3px 0 0 var(--coral); }
.tc-row.is-past { opacity: .55; }

/* Wet crossover */
.cx-out { color: var(--coral); font-variant-numeric: tabular-nums; }
.cx-line { stroke-width: 3; stroke-linecap: round; }
.cx-line.is-slick, .cx-dot.is-slick { stroke: var(--hard); } .cx-line.is-rain, .cx-dot.is-rain { stroke: var(--wet); }
.cx-label { font-weight: 800 !important; font-size: 13px !important; }
.cx-label.is-slick { fill: var(--hard) !important; } .cx-label.is-rain { fill: var(--wet) !important; }
.cx-cross { stroke: var(--muted); stroke-dasharray: 3 5; }
.cx-cross-label { fill: var(--muted) !important; font-weight: 700 !important; }
.cx-now { stroke: var(--coral); stroke-width: 1.5; }
.cx-dot { fill: var(--ink); stroke-width: 3; }
[data-pick="slick"] .cx-dot.is-slick, [data-pick="wet"] .cx-dot.is-rain { fill: currentColor; }
.cx-dot.is-slick { color: var(--hard); } .cx-dot.is-rain { color: var(--wet); }
.cx-scrub { margin-top: 10px; }
.cx-pick { margin-top: 12px; font: 600 16px/1.4 Jakarta; text-align: center; color: var(--muted); }
.cx-pick b { color: var(--text); }
[data-pick="wet"] .cx-pick b { color: var(--wet); }

@media (max-width: 900px) {
  .ch-row, .tk-cards { grid-template-columns: minmax(0, 1fr); }
  .tk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tc-row { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .tc-life { grid-column: 1 / -1; }
  .tc-row small { grid-column: 1 / -1; text-align: left; margin-top: -6px; }
}
@media (max-width: 560px) {
  .tk-cards { grid-template-columns: minmax(0, 1fr); }
  .sr-plan { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .sr-bar span { padding: 8px; font-size: 12px; }
  .sr-chart text, .tc-chart text, .cx-chart text { font-size: 18px; }
}