/* Telemetry pages. Uses the site tokens from style.css (orange/white on black); purple only marks club-best laps. */
.subnav { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0 0 var(--sp-5); padding: 0; border-bottom: 1px solid var(--c-line); }
.subnav__link { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-4); color: var(--c-text-2); text-decoration: none; font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--ls-label); font-size: var(--fs-md); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.subnav__link:hover { color: var(--c-white); }
.subnav__link[aria-current="page"] { color: var(--c-white); border-bottom-color: var(--c-orange); }
.subnav__link .icon { width: 1.1em; height: 1.1em; color: var(--c-orange-text); }
.subnav__me { margin-left: auto; }
@media (max-width: 599px) { .subnav__link { white-space: nowrap; padding: 0 var(--sp-3); font-size: var(--fs-sm); } .subnav__me { margin-left: 0; } }

.tel-narrow { max-width: 520px; margin-inline: auto; }
.tel-card { background: var(--c-surface); border: 1px solid var(--c-line); padding: var(--sp-5); }
.tel-lead { margin: 0; font-size: var(--fs-lg); color: var(--c-text); }
.tel-small { font-size: var(--fs-sm); margin: 0; }
.tel-resend { text-align: center; margin-top: var(--sp-4); }
.linkbtn { background: none; border: 0; color: var(--c-white); text-decoration: underline; text-decoration-color: var(--c-orange); text-underline-offset: 3px; cursor: pointer; font: inherit; min-height: 44px; padding: 0 var(--sp-3); }
.field__input--text { font-family: var(--font-body); font-weight: 500; letter-spacing: 0; font-size: var(--fs-lg); }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85em; word-break: break-all; color: var(--c-text-2); }
.tel-steps li { font-size: var(--fs-md); }

/* lap list */
.tel-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-4); }
.tel-select { min-height: 44px; max-width: 100%; padding: 0 var(--sp-3); background: var(--c-surface-3); color: var(--c-white); border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); font: inherit; font-size: var(--fs-sm); }
.tel-select:focus-visible { outline: 2px solid var(--c-white); outline-offset: 2px; }
.tel-check { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; font-size: var(--fs-sm); color: var(--c-text-2); }
.tel-check input { width: 20px; height: 20px; accent-color: var(--c-orange); }
.tel-table td { vertical-align: middle; }
.tel-time { font-size: var(--fs-lg); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.tel-time:hover { text-decoration: underline; text-decoration-color: var(--c-orange); text-underline-offset: 3px; }
.t-act { text-align: right; white-space: nowrap; }
.t-sectors { font-size: var(--fs-sm); white-space: nowrap; }
.tel-you { margin-left: var(--sp-2); font-size: 10px; }
.tel-pager { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin: var(--sp-4) 0; }
.tel-pager .btn { min-width: 96px; }

/* lap card */
.tel-lapcard { margin-bottom: var(--sp-5); }
.tel-lapcard__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-4); align-items: flex-end; }
.tel-lapcard__top p { margin: 0 0 var(--sp-1); }
.tel-bigtime { font-size: var(--fs-4xl); line-height: 1; margin: 0; }
.tel-lapcard__meta { text-align: right; }
@media (max-width: 599px) { .tel-lapcard__meta { text-align: left; } .tel-bigtime { font-size: var(--fs-3xl); } }
.tel-sectors { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--c-line); }
.tel-sectors > div { display: grid; gap: 2px; }
.tel-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.tel-inline { display: inline; margin: 0; }

/* compare picker */
.tel-context { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); }
.tel-pick { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin-bottom: var(--sp-5); padding: var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-line); }
.tel-pick__col { display: grid; gap: var(--sp-2); min-width: 0; }
.tel-pick label { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-text-2); }
.tel-pick .tel-select { width: 100%; }
.tel-pick__go { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
@media (min-width: 900px) { .tel-pick { grid-template-columns: 1fr 1fr auto; align-items: end; } .tel-pick__go { flex-direction: column; align-items: flex-start; } }
.tel-swatch { display: inline-block; width: 28px; height: 6px; border-radius: 3px; background: var(--c-white); flex: none; }
.tel-swatch--b { background: var(--c-orange); }

/* charts */
.tel-charts { display: grid; gap: var(--sp-4); }
.tel-legend { display: grid; gap: var(--sp-2); padding: var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-line); }
.tel-legend__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); font-size: var(--fs-lg); }
.tel-legend__time { font-size: var(--fs-xl); }
.tel-legend__delta { display: flex; align-items: baseline; gap: var(--sp-3); margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--c-line); }
.tel-legend__dv { font-family: var(--font-num); font-weight: 700; font-size: var(--fs-2xl); font-variant-numeric: tabular-nums; }
.is-slow { color: var(--c-error); } .is-fast { color: var(--c-green); }
.tel-sect { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-2); }
.tel-sect__c { display: grid; grid-template-columns: auto auto; gap: 0 var(--sp-3); align-items: baseline; font-size: var(--fs-sm); }
.tel-sect__c .label { grid-column: 1 / -1; }
.tel-sect__d { grid-column: 1 / -1; font-family: var(--font-num); font-weight: 700; }
.tel-readout { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
.tel-ro { display: grid; gap: 2px; padding: var(--sp-2) var(--sp-3); background: var(--c-black); min-width: 0; }
.tel-ro__l { font-size: 11px; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-text-3); }
.tel-ro__v { display: flex; flex-wrap: wrap; gap: 0 var(--sp-3); font-family: var(--font-num); font-weight: 700; font-size: var(--fs-xl); font-variant-numeric: tabular-nums; line-height: 1.25; }
.tel-ro__x--a { color: var(--c-white); } .tel-ro__x--b { color: var(--c-orange-text); }
@media (min-width: 700px) { .tel-readout { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tel-ro__v { font-size: var(--fs-2xl); } }
@media (min-width: 1100px) { .tel-readout { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.tel-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; }
.tel-tools { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tel-tools .btn { min-width: 44px; min-height: 44px; }
.tel-toggles { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); }
.tel-toggle { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; font-size: var(--fs-sm); color: var(--c-text-2); cursor: pointer; }
.tel-toggle input { width: 20px; height: 20px; accent-color: var(--c-orange); }
.tel-stack { display: grid; gap: var(--sp-4); }
.tel-chart { background: var(--c-surface); border: 1px solid var(--c-line); padding: var(--sp-3) 0 0; min-width: 0; }
.tel-chart[hidden] { display: none; }
.tel-chart__head { display: flex; align-items: baseline; gap: var(--sp-3); padding: 0 var(--sp-4) var(--sp-1); }
.tel-chart__title { margin: 0; font-size: var(--fs-lg); letter-spacing: var(--ls-label); }
.tel-chart__unit { color: var(--c-text-3); font-size: var(--fs-sm); }
.tel-canvas { display: block; width: 100%; touch-action: pan-y; cursor: crosshair; }
.tel-canvas:focus-visible { outline: 2px solid var(--c-white); outline-offset: -2px; }
.tel-charts:fullscreen { background: var(--c-black); padding: var(--sp-4); overflow: auto; }
.tel-devices { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.tel-devices li { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.tel-devices form { margin: 0; }

/* phone: lap rows become cards so Compare is never off-screen */
@media (max-width: 699px) {
  .tel-table, .tel-table tbody { display: block; }
  .tel-table thead { display: none; }
  .tel-table tr { display: grid; grid-template-columns: 1fr auto; column-gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-line); align-items: center; }
  .tel-table td { display: block; padding: 0; border: 0; min-width: 0; }
  .tel-table td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .tel-table td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .tel-table td:nth-child(3) { grid-column: 1; grid-row: 3; margin-top: var(--sp-1); }
  .tel-table td.t-act { grid-column: 2; grid-row: 1 / span 3; }
  .tel-table .col-opt { display: none; }
}

@media (max-width: 999px) { .tel-table .t-sectors { display: none; } }
.tel-small code { word-break: break-all; overflow-wrap: anywhere; }
@media (max-width: 430px) { .btn--lg.btn--block { padding-inline: var(--sp-3); font-size: var(--fs-md); letter-spacing: 0.03em; white-space: normal; } }