/* Alpine event controls occupy the edges, leaving the live grid and line open. */
.alpine-settings { z-index:70; }
.alpine-settings-card { max-width:660px;padding:24px;max-height:calc(100dvh - 32px);overflow:auto;border:1px solid #577385;border-radius:14px;background:linear-gradient(145deg,#173342,#091b29);color:#e9f5fa;box-shadow:0 24px 90px #001017b3; }
.alpine-settings-card header { display:flex;align-items:flex-start;gap:15px;justify-content:space-between;margin-bottom:18px; }
.alpine-settings-card header small { font-size:9px;letter-spacing:.14em;color:#a7c3d1; }
.alpine-settings-card h2 { margin:8px 0;font:900 30px/1.1 system-ui,sans-serif;letter-spacing:-.04em; }
.alpine-settings-card header p { font-size:12px;line-height:1.5;color:#9ebcca; }
.alpine-settings-card button { min-height:44px;min-width:44px;border-radius:7px;clip-path:none; }
.alpine-settings-card .small-btn { background:#304c5c;color:#e9f7fb;border-color:#6c8b9b;white-space:nowrap; }
.alpine-setup-fields { display:grid;gap:18px; }
.alpine-setup-fields label { display:grid;gap:8px;font:800 10px system-ui,sans-serif;letter-spacing:.14em;color:#add0de; }
.alpine-setup-fields select { width:100%;min-height:48px;padding:10px 13px;border:1px solid #526e7e;border-radius:7px;background:linear-gradient(#2b4858,#193242);color:#f0f9fc;font:800 13px system-ui,sans-serif;letter-spacing:.05em; }
.alpine-setup-fields option { background:#193242;color:#f0f9fc; }
.alpine-setup-fields small { font:400 12px/1.5 system-ui,sans-serif;letter-spacing:0;color:#99b6c3; }
.alpine-setup-preview { margin:22px 0;padding:16px;border:1px solid #577082;border-left:3px solid #eea259;border-radius:7px;background:#06192680; }
.alpine-setup-preview>span { display:block;font-size:8px;letter-spacing:.2em;color:#afc5d2; }
.alpine-setup-preview strong { display:block;margin-top:8px;font:850 17px system-ui,sans-serif;color:#f5d0a0; }
.alpine-setup-preview p { font:400 12px/1.6 system-ui,sans-serif;color:#a1bdca; }
.alpine-settings-card .primary { width:100%;background:linear-gradient(#ffb965,#e57425);color:#1b2024;border-color:#fbc488; }
.alpine-settings-card footer { padding-top:15px;color:#8faab8;font:400 10px/1.5 system-ui,sans-serif; }
#garage .alpine-setup-open { border-radius:6px;clip-path:none;background:linear-gradient(150deg,#3d5967,#203c4a);color:#e6f5f9;border-color:#93b5c666;min-height:44px; }
.tune-profile-tabs { display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 10px; }
.tune-profile-tabs button { min-height:44px;min-width:110px;border:1px solid #527383;border-radius:6px;background:linear-gradient(#2b4654,#173441);color:#c8e0e9;letter-spacing:.1em;font:850 11px system-ui,sans-serif; }
.tune-profile-tabs button[aria-pressed="true"] { background:linear-gradient(#fac479,#e9933c);color:#202b30;border-color:#ffdaa2;box-shadow:inset 0 1px #ffe5ba,0 3px 8px #07131b40; }
.tune-profile-help { margin:0 0 18px;font:400 11px/1.5 system-ui,sans-serif;color:#708e9c; }
.alpine-cockpit { display:none;pointer-events:none;position:absolute;inset:0;z-index:9; }
.alpine-cockpit.active { display:block; }
.alpine-start-card { position:absolute;top:110px;left:50%;transform:translateX(-50%);width:240px;padding:12px 16px 10px;display:none;text-align:center;color:#eaf7fd;border:2px solid;border-color:#91a9b7 #344d5d #101f2c #516d7e;border-radius:11px;background:linear-gradient(140deg,#304854f5,#081a29f5 65%);box-shadow:inset 0 1px #e4f4ff55,inset 0 -3px #020c14,0 10px 26px #00101b99; }
.alpine-start-card.visible { display:block; }
.alpine-start-crown { display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid #59717e66;padding-bottom:7px;font:850 8px system-ui,sans-serif;letter-spacing:.12em; }
.alpine-start-crown em { font-style:normal;color:#efbc80; }
.alpine-count-lamps { display:flex;justify-content:center;gap:9px;margin:9px 0 7px; }
.alpine-count-lamps i { width:13px;height:13px;border-radius:50%;border:2px solid #697a83;background:radial-gradient(circle at 32% 25%,#8d6e43,#1f1912);box-shadow:inset 0 -2px 3px #000; }
.alpine-count-lamps i.on { background:radial-gradient(circle at 35% 27%,#fff6d4,#ffba45 55%,#ad5f12);box-shadow:0 0 12px #ffc05088; }
.alpine-start-card>strong { display:block;font:900 62px/1.05 Consolas,'Courier New',monospace;color:#ffddae;text-shadow:0 0 15px #d9912b33; }
.alpine-start-card>strong.word { font:900 25px/1.3 system-ui,sans-serif;letter-spacing:-.04em; }
.alpine-start-card>[data-alpine="instruction"] { display:block;font:800 8px/1.4 system-ui,sans-serif;color:#b2cbd7;letter-spacing:.05em;margin:5px 0 9px; }
.alpine-start-belt { display:flex;justify-content:space-between;gap:8px;font:800 8px system-ui,sans-serif;color:#779caa; }
.alpine-start-belt b { color:#edf6fc;font:900 11px Consolas,monospace; }
.alpine-start-clock { height:3px;background:#142832;border:1px solid #4d6673;margin-top:8px; }
.alpine-start-clock i { display:block;height:100%;background:#efb06a; }
.alpine-start-card.go { width:146px;border-color:#83c590;background:linear-gradient(#264d36,#0b261c); }
.alpine-start-card.go>strong { color:#b9ffcf; }
.alpine-start-card.go .alpine-start-belt,.alpine-start-card.go .alpine-start-clock,.alpine-start-card.go .alpine-count-lamps { display:none; }
/* The race clock used to be a 95px block pinned to the right, sitting over the
   riding view and overlapping the progress bar. It is a thin strip under the
   progress bar now: same information, in the empty band the top section
   already had, and the right third of the screen is given back to the race. */
.alpine-run-data { position:absolute;top:118px;left:22px;right:22px;width:auto;display:none;
  align-items:center;justify-content:space-between;gap:12px;
  border:1px solid #607c8c66;border-radius:7px;padding:4px 10px;
  background:linear-gradient(120deg,#243e4df0,#061724ee);
  box-shadow:inset 0 1px #bde0f122,0 4px 14px #00101a55;color:#e8f5fb; }
.alpine-cockpit.running .alpine-run-data { display:flex; }
.alpine-race-time { display:flex;align-items:baseline;gap:8px;white-space:nowrap; }
.alpine-race-time>span { font:800 7px system-ui,sans-serif;letter-spacing:.16em;color:#89a8b8; }
.alpine-race-time>strong { font:900 17px/1.3 Consolas,monospace;letter-spacing:-.04em; }
/* Shared belt telemetry; the cockpit footer carries it in every phase. */
.alpine-belt-live { border-top:1px solid #44607466;padding:5px 0 4px;font:750 7px system-ui,sans-serif;letter-spacing:.12em;color:#89a8b8; }
.alpine-belt-live>span b { font:900 11px/1.2 Consolas,monospace;letter-spacing:0;color:#e8f5fb;margin-left:3px; }
.alpine-belt-live>span b.hot { color:#ffb067; }
.alpine-slip-track { height:5px;margin:4px 0 3px;border-radius:3px;background:#0a1d29;border:1px solid #44607466;overflow:hidden; }
.alpine-slip-track i { display:block;height:100%;width:0;border-radius:2px;background:#58d06b;transition:width .12s linear; }
.alpine-belt-live>em { font:800 8px Consolas,monospace;letter-spacing:.04em;font-style:normal;color:#b8dfc3; }
.alpine-condition { display:flex;align-items:center;flex-wrap:nowrap;gap:6px;font:750 7px system-ui,sans-serif;letter-spacing:.06em;color:#a6cbd7;white-space:nowrap;min-width:0; }
.alpine-condition i { width:5px;height:5px;border-radius:50%;background:#b3e8f7;margin-top:2px; }
.alpine-condition b { font-size:8px;color:#b8dfc3; }
.alpine-condition.slush span { color:#86d1e9; }.alpine-condition.damage b { color:#ffd096; }
.alpine-contact-card { display:none;position:absolute;top:190px;left:50%;transform:translateX(-50%);text-align:center;padding:7px 15px;background:linear-gradient(#4d2f16ed,#281809ed);border:1px solid #c68e54;border-radius:6px;color:#ffd5a2;box-shadow:0 6px 18px #30180a50; }
.alpine-contact-card.visible { display:block; }.alpine-contact-card span { display:block;font:800 7px system-ui,sans-serif;letter-spacing:.15em; }.alpine-contact-card strong { font:850 11px system-ui,sans-serif; }
.alpine-staging #hud .callout { display:none; }
.alpine-race #hud .controls .control { border-radius:9px;border:2px solid;border-color:#6e91a4 #294c62 #0a2435 #4c788e;background:linear-gradient(150deg,#365c70,#14354b 60%);box-shadow:inset 0 1px #e8f7ff44,inset 0 -3px #081825aa,0 3px #123147;color:#e8f5fb; }
.alpine-race #hud .controls .boost { background:linear-gradient(150deg,#ffce86,#d67b29);border-color:#ffe2b2 #a55b27 #713b17 #d59d5b;color:#1c2428; }
.alpine-race #hud .controls .control.pressed { transform:translateY(2px);box-shadow:inset 0 3px 9px #06152599,0 1px #7396a7; }
@media(max-width:650px) {
  .alpine-settings-card { padding:18px;width:calc(100vw - 24px);max-height:calc(100dvh - 24px); }
  .alpine-settings-card h2 { font-size:25px; }.alpine-settings-card header { margin-bottom:12px; }.alpine-settings-card header p { font-size:11px; }
  .alpine-setup-fields { gap:13px; }.alpine-setup-fields small { font-size:11px; }.alpine-setup-preview { margin:16px 0;padding:12px; }
  .alpine-setup-preview strong { font-size:14px; }.alpine-setup-preview p { font-size:11px; }
  .alpine-start-card { top:106px;width:208px;padding:10px 12px; }.alpine-start-card>strong { font-size:53px; }.alpine-start-card>strong.word { font-size:23px; }
  .alpine-run-data { top:116px;left:14px;right:14px;width:auto;padding:4px 9px; }.alpine-race-time>strong { font-size:16px; }
  .alpine-contact-card { top:180px; }.tune-profile-help { font-size:10px; }
  #garage .alpine-setup-open { margin-top:8px;font-size:9px;letter-spacing:.07em; }
  .alpine-race #hud .run-name { max-width:180px;font-size:10px; }.alpine-race #hud .run-stat { font-size:10px; }
}
@media(orientation:landscape) and (max-height:560px) {
  .alpine-start-card { top:78px;width:190px;padding:8px 10px; }.alpine-start-card>strong { font-size:39px; }.alpine-start-card>strong.word { font-size:21px; }
  .alpine-run-data { top:132px;left:14px;right:14px;width:auto;padding:3px 9px; }.alpine-race-time>strong { font-size:15px; }.alpine-contact-card { top:172px; }
}

/* A belt that cannot hold the motor is the weakest link in the machine and the
   race is over before the first corner. Say so on the grid, in the words that
   name the fix, rather than letting it be discovered two seconds in. */
.alpine-belt-alarm { margin-top:5px;padding:4px 6px;border-radius:5px;background:#5a1414;border:1px solid #ff8d6b66;
  font:800 7px system-ui,sans-serif;letter-spacing:.07em;line-height:1.5;color:#ffd2c2; }
.alpine-belt-alarm[hidden] { display:none; }

/* A thin belt strip at the screen edge, below the rider's controls. */
.alpine-cockpit .alpine-belt-live{position:absolute;left:10px;right:10px;bottom:calc(4px + env(safe-area-inset-bottom));height:28px;padding:4px 9px;display:flex;align-items:center;gap:12px;border:1px solid #82afc233;border-radius:4px;background:linear-gradient(120deg,#102633f5,#081824f0);box-shadow:inset 0 1px #c8e6f019;letter-spacing:.05em;white-space:nowrap}
.alpine-cockpit .alpine-belt-live>span{font-size:8px;white-space:nowrap}
.alpine-cockpit .alpine-belt-live>span b{font-size:14px}
.alpine-cockpit .alpine-slip-track{flex:1;max-width:180px;height:5px;margin:0}
.alpine-cockpit .alpine-belt-live>em{margin-left:auto;font-size:10px}
.alpine-start-card .alpine-start-belt>span:first-child{display:none}
.alpine-start-card .alpine-start-belt{justify-content:center}
.alpine-race #hud .controls,.alpine-staging #hud .controls{bottom:calc(max(24px,env(safe-area-inset-bottom)) + 12px)}
@media(max-width:650px){.alpine-race #hud .br-round-gauges,.alpine-staging #hud .br-round-gauges{--br-gauge-bottom:max(122px,calc(env(safe-area-inset-bottom) + 114px))}}
@media(orientation:landscape) and (max-height:560px){.alpine-race #hud .br-round-gauges,.alpine-staging #hud .br-round-gauges{--br-gauge-bottom:max(124px,calc(env(safe-area-inset-bottom) + 116px))}}

body.alpine-race:has(#boostStages:not(.hidden)) #hud .br-round-gauges{--br-gauge-bottom:max(180px,calc(env(safe-area-inset-bottom) + 172px))}
body.alpine-race #boostStages{bottom:calc(112px + env(safe-area-inset-bottom))}
@media(orientation:landscape) and (max-height:560px){body.alpine-race:has(#boostStages:not(.hidden)) #hud .br-round-gauges{--br-gauge-bottom:max(122px,calc(env(safe-area-inset-bottom) + 114px));left:12px;transform:none;width:300px}body.alpine-race #boostStages{left:auto;right:12px;transform:none}}

@media(orientation:landscape) and (max-height:560px){.alpine-race #hud .br-round-gauges,.alpine-staging #hud .br-round-gauges{left:12px;transform:none;width:300px}}

/* The second slip readout: track surface against the ground. */
.alpine-belt-live .alpine-track-slip{color:#bdf7cd}
.alpine-belt-live .alpine-track-slip.warn{color:#ffb766}

.alpine-belt-live .alpine-drive-ratio{color:#8eeaff}
.alpine-belt-live .alpine-drive-ratio.shifting{color:#edc48a}