/* "How racing drivers overtake": the corner replays, the pass phases, the move and defence pickers, and the computer driver's head. */

/* The corner */
.ov-svg { display: block; width: 100%; height: auto; border-radius: var(--radius-md); background: #0f1316; }
.ov-grass { fill: #0f1316; }
.ov-road { fill: none; stroke: var(--raised); }
.ov-edge { fill: none; stroke: #ffffff30; stroke-width: 1.5; }
.ov-kerb { fill: none; stroke: #fff; stroke-width: 5; }
.ov-kerb-red { fill: none; stroke: #f04452; stroke-width: 5; stroke-dasharray: 8 8; }
.ov-ideal { fill: none; stroke: #ffffff2a; stroke-width: 1.5; stroke-dasharray: 3 7; stroke-linecap: round; }
.ov-board rect { fill: var(--ink); stroke: #ffffff40; stroke-width: 1; }
.ov-board text { font: 800 8px/1 Jakarta; fill: var(--muted); }

/* Cars and callouts */
.ov-trail { fill: none; stroke-width: 2.5; stroke-opacity: .45; stroke-linecap: round; }
.ov-cockpit { fill: #080b0dcc; }
.ov-brake { fill: #ff1838; opacity: 0; transition: opacity 80ms; }
.ov-brake.is-on { opacity: 1; filter: drop-shadow(0 0 4px #ff1838); }
.ov-tag text { font: 800 9px/1 Jakarta; letter-spacing: .04em; }
.ov-bracket { fill: none; stroke: var(--coral); stroke-width: 2; stroke-dasharray: 3 4; stroke-linecap: round; }
.ov-note { opacity: 0; transition: opacity 240ms var(--motion); pointer-events: none; }
.ov-note.is-on { opacity: 1; }
.ov-note rect { fill: rgb(8 11 13 / .85); stroke: #ffffff24; stroke-width: 1; }
.ov-note text { font: 700 11px/1 Jakarta; fill: var(--text); }

/* Shared controls and readouts */
.ov-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.ov-controls small { font: 700 11px/1 Jakarta; letter-spacing: .14em; text-transform: uppercase; color: var(--subtle); }
.ov-read { min-height: 3em; margin: 16px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }

/* Anatomy of a pass */
.ov-phases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: phase; }
.ov-phases li { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--ink); box-shadow: inset 0 0 0 1px var(--rim); font: 700 13px/1.2 Jakarta; color: var(--subtle); transition: background 200ms, color 200ms; counter-increment: phase; }
.ov-phases li::before { content: counter(phase); display: block; margin-bottom: 6px; font: 800 11px/1 Jakarta; color: var(--subtle); }
.ov-phases li.is-done { color: var(--muted); }
.ov-phases li.is-on { background: color-mix(in srgb, var(--coral) 16%, var(--ink)); box-shadow: inset 0 0 0 1px var(--coral); color: var(--text); }
.ov-phases li.is-on::before { color: var(--coral); }

/* Inside a computer driver's head */
.ov-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
.ov-gauges { display: grid; align-content: start; gap: 14px; margin: 0; padding: 18px 20px; border-radius: var(--radius-md); background: var(--ink); box-shadow: inset 0 0 0 1px var(--rim); list-style: none; }
.ov-gauges li { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); align-items: center; gap: 12px; font: 700 13px/1.2 Jakarta; color: var(--muted); }
.ov-bar { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--alternate); overflow: hidden; }
.ov-bar i { position: absolute; inset: 0; border-radius: 4px; background: var(--hard); transform: scaleX(0); transform-origin: left; }
.ov-gauges li.is-met { color: var(--text); }
.ov-gauges li.is-met .ov-bar i { background: var(--coral); }
.ov-gauges li[data-gauge="heat"] .ov-bar i { background: var(--medium); }
.ov-gauges li.is-hot { color: var(--soft); }
.ov-gauges li.is-hot .ov-bar i { background: var(--soft); }
.ov-gauges li[data-gauge="risk"] .ov-bar i { background: #c3cacd; }
.ov-decide { display: grid; align-content: start; gap: 16px; padding: 18px 20px; border-radius: var(--radius-md); background: var(--ink); box-shadow: inset 0 0 0 1px var(--rim); }
.ov-decide small { font: 700 11px/1 Jakarta; letter-spacing: .14em; text-transform: uppercase; color: var(--subtle); }
.ov-ready { position: relative; height: 14px; margin-top: 10px; border-radius: 7px; background: var(--alternate); }
.ov-ready > i { position: absolute; inset: 0; border-radius: 7px; background: linear-gradient(90deg, var(--hard), var(--coral)); transform: scaleX(0); transform-origin: left; }
.ov-ready > b { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--text); transition: left 300ms var(--motion); }
.ov-verdict { margin: 10px 0 0; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--alternate); font: 800 17px/1.3 Jakarta; letter-spacing: -.01em; transition: background 200ms, box-shadow 200ms; }
.ov-verdict[data-state="pressure"] { box-shadow: inset 0 0 0 1px var(--medium); }
.ov-verdict[data-state="commit"] { background: color-mix(in srgb, var(--coral) 20%, var(--alternate)); box-shadow: inset 0 0 0 1px var(--coral); }
.ov-verdict[data-state="hold"] { box-shadow: inset 0 0 0 1px var(--hard); color: var(--muted); }

@media (max-width: 900px) {
  .ov-head { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .ov-phases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ov-note { display: none; }
  .ov-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-gauges li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ov-controls .seg { max-width: 100%; overflow-x: auto; }
}