/* /try: one lap against the best, from the visitor's own MoTeC file. Same tokens as the rest of the site. */

.try { padding-block: 36px 56px; display: grid; gap: 28px }
.try h1 { font: 700 clamp(40px, 6vw, 68px)/1 var(--display); text-transform: uppercase; margin: 0 0 14px; text-wrap: balance }
.try h2 { font: 700 clamp(22px, 3vw, 30px)/1.15 var(--display); text-transform: uppercase; margin: 0 0 16px; text-wrap: balance }
.try h2 .num { text-transform: none; font-size: .8em; color: var(--coast) }
.try .lede { color: var(--muted); max-width: 40em; margin: 0; font-size: 17px }
.try .label { color: var(--faint); font: 600 12px var(--body); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 10px }
.top .nav__store { margin-left: 10px }

/* ---------- loading the files */
.try-load { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px 28px; align-items: start }
.drop { display: grid; justify-items: center; gap: 6px; padding: 30px 20px; border: 1.5px dashed var(--line-2); border-radius: 16px;
  background: var(--bg-2); text-align: center; cursor: pointer; transition: border-color .3s, background-color .3s, transform .4s var(--spring) }
.drop:hover, .drop.is-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 55%, var(--bg-2)) }
.drop.is-over { transform: scale(1.01) }
.drop:focus-within { outline: 2px solid var(--accent); outline-offset: 3px }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0 }
.drop svg { width: 30px; height: 30px; color: var(--accent) }
.drop b { font: 600 17px var(--body) }
.drop__or { color: var(--muted); font-size: 14px }
.steps { margin: 0; padding-left: 1.3em; color: var(--muted); font-size: 15px; display: grid; gap: 6px }
.steps b { color: var(--ink) }
.try-statusbar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px }
#try-status { margin: 0; flex: 1 1 280px; color: var(--muted); font-size: 14.5px }
#try-status.is-bad { color: var(--brake) }

/* ---------- the laps */
.try-session .what { margin: 0 0 14px; font: 600 15px var(--body) }
.lapchips { display: flex; flex-wrap: wrap; gap: 8px }
.lapchip { display: grid; grid-template-columns: auto auto; gap: 0 12px; align-items: baseline; padding: 8px 12px; border-radius: 12px;
  border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .25s, background-color .25s, transform .35s var(--spring) }
.lapchip:hover:not(:disabled) { border-color: var(--coast); transform: translateY(-1px) }
.lapchip.is-on { border-color: var(--coast); background: color-mix(in srgb, var(--coast) 14%, var(--panel)) }
.lapchip.is-best { border-color: color-mix(in srgb, var(--accent) 60%, var(--line-2)); cursor: default }
.lapchip__n { font-size: 12px; color: var(--muted); grid-column: 1 / -1 }
.lapchip__t { font-size: 16px }
.lapchip__g { font-size: 12px; color: var(--muted) }
.lapchip.is-best .lapchip__g { color: var(--accent) }

/* ---------- the comparison */
.try-results[hidden] { display: none }
.try-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start }
.mapbox, .chartbox { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px }
.mapbox canvas { display: block; width: 100%; aspect-ratio: 1 / 1; max-height: 460px }
.mapbox figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--muted); font-size: 13px; padding-top: 8px }
.mapbox small { flex-basis: 100%; color: var(--faint); font-size: 12px; line-height: 1.5 }
.key { display: inline-block; width: 14px; height: 4px; border-radius: 2px; vertical-align: middle }
.key--lost { background: var(--brake) } .key--gained { background: var(--throttle) }
.key--ref { background: var(--accent) } .key--other { background: var(--coast) }
.key--height { background: var(--line-2); height: 8px }
#try-heightkey { display: inline-flex; align-items: center; gap: 6px }
#try-heightkey[hidden] { display: none }

.corners { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 520px; overflow: auto }
.corner { display: grid; grid-template-columns: 52px 78px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 10px 12px;
  border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: 10px; background: var(--bg-2); font-size: 14.5px;
  transition: border-color .2s, background-color .2s }
.corner:hover { background: var(--raise) }
.corner.is-lost { border-left-color: var(--brake) }
.corner.is-gained { border-left-color: var(--throttle) }
.corner__n { color: var(--muted); font-size: 13px }
.corner__t { font-size: 14px }
.corner.is-lost .corner__t { color: var(--brake) }
.corner.is-gained .corner__t { color: var(--throttle) }
.corner__why { color: var(--ink) }
.corner__why b { display: block; font-weight: 600; font-size: 13px; color: var(--muted) }
.corner__why small { display: block; font-size: 12px; color: var(--faint); margin-bottom: 2px }
.corner__why i { color: var(--faint); font-style: normal }

.chartbox { margin-top: 20px }
.chartbox canvas { display: block; width: 100%; height: 300px; touch-action: none; cursor: crosshair }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--muted); font-size: 13px; padding-bottom: 8px }
.legend .unit { margin-left: auto; color: var(--faint); font-family: var(--mono); font-size: 12px }
#try-readout { color: var(--muted); font-size: 13.5px; padding-top: 8px; min-height: 1.6em }
#try-readout .ref { color: var(--accent) } #try-readout .other { color: var(--coast) }

/* ---------- the app */
.try-app { border-top: 1px solid var(--line); padding-top: 28px; display: grid; gap: 4px; justify-items: start }
.try-app ul { margin: 0 0 18px; padding-left: 1.2em; color: var(--muted); display: grid; gap: 4px; max-width: 46em }
.try-app .store img { height: 54px; width: auto }
.try-app .free { margin: 6px 0 0; color: var(--faint); font-size: 13px }

@media (max-width: 860px) {
  .try-load, .try-grid { grid-template-columns: minmax(0, 1fr) }
  .chartbox canvas { height: 240px }
}
@media (max-width: 520px) {
  .corner { grid-template-columns: 36px 66px minmax(0, 1fr); padding: 9px 10px; font-size: 14px }
}
@media (prefers-reduced-motion: reduce) {
  .drop, .lapchip { transition: none }
}