@import url("racegeek-coach.css");
/* Race Geek local: phone-width fixes on top of the original racegeek.io stylesheet (kept untouched). */
/* MyChron session: grid children default to min-width:auto, so the 459px lap table widened the page on phones */
.mc__session-body > * { min-width: 0; }
@media (max-width: 1024px) { .mc__session-body { grid-template-columns: minmax(0, 1fr); } }
.mc__panel { max-width: 100%; overflow-x: auto; }
/* Video results header: title, hint, export button and badge did not wrap at 390px */
.dashboard__section-header { flex-wrap: wrap; gap: var(--space-sm); }
.dashboard__section-header > * { min-width: 0; }
/* The channel select grew to its longest option and ran out of its card; on phones it gets its own full-width row
   (shrunk beside its label it cut the chosen channel: 'Steering Angl') */
.mc__channel-select { min-width: 0; }
@media (max-width: 768px) { .mc__channel-selector { flex-wrap: wrap; } .mc__channel-select { flex-basis: 100%; } }
/* The session delete button only appeared on hover, so on a phone it was an invisible tap target */
@media (hover: none) { .mc__history-delete { opacity: 1; width: 40px; height: 40px; } }
/* Recent sessions: track, date and lap count sat on one unwrapped line that ran under the green best time on phones */
.mc__history-meta { flex-wrap: wrap; column-gap: var(--space-md); row-gap: 2px; }
.mc__history-meta > span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
/* Draw Finish Line: three full-width buttons in one row pushed Cancel off-screen */
@media (max-width: 768px) { .dashboard__finish-line-actions { flex-wrap: wrap; } }
/* Track map: in the column layout the map box shrank to 0px wide, and up to ~1024px the filters card (280px, grown to
   ~450 by its one-line filter row) left the map 0-244px: the phone column layout runs until both fit side by side */
@media (max-width: 1100px) {
  .tracks__map-area { flex-direction: column-reverse; }
  .tracks__map-area .tracks__filters { flex: none; width: 100%; }
  .tracks__filter-row { flex-wrap: wrap; }
  .tracks__map-area .tracks__map-container { align-self: stretch; }
}
/* Track map: OSM tiles (Carto's keyless dark tiles now say 'API KEY REQUIRED'), darkened to the original look */
.tracks__map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9); }
/* Welcome banner links, in the banner's own accent style (.dashboard__welcome em) */
.dashboard__welcome a { color: var(--red); font-weight: 600; }

/* ---- MyChron analysis (spec 2.5, 4): colour tokens; brand red #E10600 is never used on data ---- */
:root { --rg-p: #B45CFF; --rg-g: #00D26A; --rg-y: #FFD60A; --rg-r: #FF6A2B; --rg-x: #3A3A4A; }
/* one convention for the whole page: losing time = --rg-r, gaining = --rg-g. In the old compare, benchmark and replay
   cards a + means the OTHER lap is slower (the first / open one gains: the bundle draws it green in its own chart), so
   --positive stays green and --negative moves off the brand red onto --rg-r; zero is neutral (rg-dzero) */
.mc__compare-delta--positive { color: var(--rg-g); background: color-mix(in srgb, var(--rg-g) 12%, transparent); }
.mc__compare-delta--negative { color: var(--rg-r); background: color-mix(in srgb, var(--rg-r) 12%, transparent); }
.mc__compare-delta.rg-dzero { color: var(--text-secondary); background: #ffffff0d; }
/* the new UI names the direction itself: rg-dlose / rg-dgain (the dive headline, the coach's cumulative gaps) */
.rg-dlose { color: var(--rg-r); }
.rg-dgain { color: var(--rg-g); }
.mc__compare-delta.rg-dlose { background: color-mix(in srgb, var(--rg-r) 12%, transparent); }
.mc__compare-delta.rg-dgain { background: color-mix(in srgb, var(--rg-g) 12%, transparent); }
/* the summary replaces the bundle's header cards (their Average counts the out lap) */
.mc.rg-on .mc__session-header .mc__stat-cards { display: none; }
.mc.rg-on .mc__session-header { margin-bottom: var(--space-md); }
.mc.rg-on .mc__session-tags { margin-bottom: 0; }
.rg-an { display: flex; flex-direction: column; gap: var(--space-md); margin-bottom: var(--space-lg); min-width: 0; }
.rg-an > * { min-width: 0; }
.rg-setup { margin: calc(-1 * var(--space-sm)) 0 0; }
.rg-toggle { display: flex; gap: var(--space-sm); }
.rg-toggle .btn { flex: 1; min-height: 44px; }
.rg-card h3, .rg-summary h3 { margin-bottom: var(--space-sm); }
/* summary: 2x2 numbers + the verdict line; must end above the fold of a 360x780 phone */
.rg-summary.mc__chart-container { padding: var(--space-md); }
.rg-summary .mc__stat-cards { grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.rg-summary .mc__stat { padding: 10px 8px; text-align: left; min-width: 0; font: inherit; color: inherit; }
.rg-summary .mc__stat-value { font-size: 1.25rem; line-height: 1.2; }
.rg-summary .rg-text .mc__stat-value { font-family: var(--font-primary); font-size: 1rem; }
.rg-summary .rg-best { border-color: var(--rg-p); border-left-width: 4px; background: color-mix(in srgb, var(--rg-p) 8%, transparent); }
.rg-summary .rg-best .mc__stat-value { color: var(--white); }
.rg-summary .rg-ideal { cursor: pointer; }
.rg-summary .rg-how { font-family: var(--font-primary); font-size: .75rem; font-weight: 700; color: var(--rg-p); }
.rg-stat-title { margin: 0 0 2px; }
.rg-stat-sub { font-size: .6875rem; color: var(--text-muted); line-height: 1.3; margin-top: 2px; }
.rg-verdict { margin: var(--space-sm) 0 0; font-size: .8125rem; font-weight: 600; color: var(--text-secondary); line-height: 1.4; }
/* where to gain */
.rg-opps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rg-row-btn { display: flex; gap: var(--space-sm); align-items: flex-start; width: 100%; min-height: 44px; padding: 8px; text-align: left; background: #ffffff05; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font-size: .8125rem; line-height: 1.4; cursor: pointer; }
.rg-opps { counter-reset: rgopp; }
.rg-opps > li { counter-increment: rgopp; }
.rg-row-btn::before { content: counter(rgopp); flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--rg-r); color: #000; font-weight: 800; font-size: .75rem; display: inline-flex; align-items: center; justify-content: center; }
.rg-topflat { padding: 8px; font-size: .75rem; color: var(--text-muted); line-height: 1.4; }
/* lap strip */
.rg-strip { display: flex; flex-direction: column; gap: 2px; }
.rg-lap { display: grid; grid-template-columns: 24px 1fr 100px; gap: var(--space-sm); align-items: center; min-height: 44px; padding: 0 6px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-primary); cursor: pointer; text-align: left; }
.rg-lap.rg-sel { border-color: var(--white); background: #ffffff0a; }
.rg-lapn { font-weight: 700; color: var(--text-muted); font-size: .75rem; }
.rg-track { display: block; height: 14px; min-width: 0; }
.rg-bar { display: block; height: 100%; min-width: 4px; border-radius: 3px; }
.rg-bar.rg-bX { background: repeating-linear-gradient(135deg, var(--rg-x) 0 5px, #55556a 5px 9px); }
.rg-lapt { font-size: .8125rem; font-weight: 600; white-space: nowrap; text-align: right; }
.rg-lapt small { color: var(--text-muted); font-size: .6875rem; margin-right: 6px; }
/* bands: solid fills and black text on the phone (sunlight); purple solid, white text, inset ring */
.rg-bP { background: var(--rg-p); color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.rg-bG { background: var(--rg-g); color: #000; }
.rg-bY { background: var(--rg-y); color: #000; }
.rg-bR { background: var(--rg-r); color: #000; }
.rg-bX { background: var(--rg-x); color: var(--text-dim); }
.rg-bar.rg-bP { box-shadow: none; }
/* corner grid: 7 columns fit 360 px; more columns scroll inside the card, the lap column stays */
.rg-select { width: 100%; min-height: 44px; margin-bottom: var(--space-sm); }
.rg-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.rg-grid { display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
.rg-wide { width: max-content; }
.rg-grow { display: grid; grid-template-columns: 28px repeat(var(--n), minmax(0, 1fr)); gap: 2px; }
.rg-wide .rg-grow { grid-template-columns: 28px repeat(var(--n), 48px); }
.rg-lapcell { position: sticky; left: 0; z-index: 1; background: var(--bg-card); display: flex; align-items: center; justify-content: center; font-size: .6875rem; font-weight: 700; color: var(--text-muted); }
.rg-cell, .rg-hcell { min-height: 44px; min-width: 0; padding: 0 1px; border: 0; border-radius: 4px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; letter-spacing: -.02em; }
.rg-dirty .rg-lapcell { color: var(--text-dim); }
.rg-hcell { background: transparent; color: var(--text-primary); }
.rg-circ { width: 26px; height: 26px; border-radius: 50%; background: #15151E; border: 1.5px solid rgba(255, 255, 255, .5); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-primary); font-size: .75rem; }
.rg-start, .rg-mhead { font-family: var(--font-primary); font-size: .625rem; text-transform: uppercase; color: var(--text-muted); }
.rg-foot { font-size: 11px; }
.rg-fcell { display: flex; align-items: center; justify-content: center; min-height: 28px; color: var(--rg-p); font-weight: 700; }
.rg-fideal { grid-column: 2 / -1; justify-content: flex-start; gap: 6px; padding-left: 4px; color: var(--white); }
.rg-footlabel { font-size: .5625rem; text-transform: uppercase; color: var(--text-muted); }
.rg-footcap { position: sticky; left: 0; align-self: flex-start; padding: 4px 0 0 2px; font-size: .5625rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); }
.rg-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: var(--space-sm); font-size: .6875rem; color: var(--text-muted); }
.rg-chip { display: inline-flex; align-items: center; gap: 5px; }
.rg-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.rg-sw.rg-bP { box-shadow: inset 0 0 0 1.5px #fff; }
@media (max-width: 480px) {
  .rg-card.mc__chart-container, .rg-gridcard.mc__chart-container { padding: var(--space-md) 8px; }
}
/* bottom sheets (the dive, and how the ideal lap is built) */
.rg-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: var(--z-modal); }
.rg-sheet { position: fixed; inset: auto 0 0 0; max-height: 88dvh; overflow: auto; overscroll-behavior: contain; z-index: calc(var(--z-modal) + 1); background: var(--bg-card); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: var(--space-sm) var(--space-md) calc(var(--space-md) + env(safe-area-inset-bottom)); max-width: 720px; margin: 0 auto; }
.rg-sheet h3 { font-size: 1rem; margin-bottom: var(--space-sm); }
/* 05/10: "Send on mobile data?" before a big video goes up (rgUploadAsk in mychron-extras.js) */
.rg-ask { display: flex; align-items: center; justify-content: center; padding: 16px; }
.rg-ask__card { width: 100%; max-width: 380px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-md); }
.rg-ask__card h3 { font-size: 1.0625rem; margin: 0 0 var(--space-sm); color: var(--text-primary); }
.rg-ask__card p { margin: 0 0 var(--space-md); color: var(--text-secondary); line-height: 1.45; }
.rg-ask__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.rg-ask__row .btn { width: 100%; min-height: 44px; justify-content: center; }
.rg-sheet-top { display: flex; align-items: center; justify-content: flex-end; position: relative; min-height: 44px; margin-bottom: var(--space-sm); }
.rg-handle { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); width: 40px; height: 4px; border-radius: 2px; background: var(--border-hover); }
.rg-close { min-height: 44px; }
.rg-compose { font-size: .8125rem; line-height: 1.6; color: var(--text-primary); }
.rg-dhead { flex-wrap: wrap; gap: var(--space-sm) var(--space-md); }
.rg-dhead .mc__compare-delta { margin-left: 0; }
.rg-dvs { font-size: .75rem; color: var(--text-muted); width: 100%; }
.rg-mini { position: relative; margin-bottom: var(--space-sm); }
.rg-minilabel { position: absolute; right: 8px; bottom: 6px; font-size: .625rem; color: var(--text-muted); font-family: var(--font-mono); }
.rg-dchart { margin-bottom: var(--space-sm); }
.rg-chart-ph { height: 150px; border: 1px dashed var(--border-hover); border-radius: var(--radius-md); margin-bottom: var(--space-sm); }
.rg-metrics { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--space-sm); }
.rg-metrics .btn { margin-top: var(--space-sm); align-self: flex-start; }
.rg-mrow { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--space-xs); padding: 6px 4px; border-bottom: 1px solid var(--border); align-items: center; font-size: .8125rem; }
.rg-mrow > span { min-width: 0; overflow-wrap: anywhere; }
.rg-mhead { font-size: .6875rem; color: var(--text-muted); text-transform: uppercase; }
.rg-mlabel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--text-secondary); }
.rg-est { font-size: .5625rem; padding: 1px 5px; }
.rg-mspan { grid-column: 2 / -1; font-size: .75rem; }
.rg-esthint { margin: var(--space-xs) 0 0; }
.rg-why { font-size: .9375rem; line-height: 1.45; font-weight: 600; margin: var(--space-sm) 0 var(--space-md); }
.rg-steps { display: flex; gap: var(--space-sm); }
.rg-steps .btn { flex: 1; min-height: 44px; }

/* login by phone (27/09): the forgot-password link under the password, right-aligned, a real tap target */
.login-forgot{display:block;text-align:right;font-size:14px;line-height:44px;margin:-8px 0 4px;color:inherit;opacity:.85}

/* one menu everywhere: the hamburger top left, the drawer from the left (12/10: "open on the left from now on"; the
   bundle's own order and side, so the 27/09 top-right override is gone). live/rg-menu.js does the same on every page. */
@media (max-width:768px){.shell__mobile-header{padding-left:16px!important;padding-right:16px!important}} /* the same 16 px gutter as the other pages: the menu at the same x everywhere */

/* "Ask about this session" (round 2, 01/10; live/extras/ask.js): one card in the Basic view, the Advanced view's left
   column and the benchmark. Chips and the send button are 44 px tap targets (36 in the coach from 1024, like its controls) */
.rg-ask { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.rg-ask .rg-ask__title { margin: 0; }
.rg-ask .rg-ask__hint { margin: 0; font-size: .6875rem; line-height: 1.4; color: var(--text-muted); }
.rg-ask__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rg-ask__chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 100%; padding: 6px 12px; background: #ffffff0a; border: 1px solid var(--border); border-radius: 18px; color: var(--text-primary); font: inherit; font-size: .75rem; line-height: 1.25; text-align: left; cursor: pointer; }
.rg-ask__chip svg { flex: none; }
.rg-ask-jump { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; margin-top: var(--space-lg); padding: 0; background: none; border: 0; border-top: 1px solid var(--border); color: var(--text-secondary); font: inherit; font-size: .875rem; text-align: left; cursor: pointer; }
.rg-ask-jump:hover, .rg-ask-jump:focus-visible { color: var(--text-primary); }
.rg-ask-jump span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#rg-ask { scroll-margin-top: calc(72px + env(safe-area-inset-top)); }
.rg-ask__chip:hover:not(:disabled) { border-color: var(--border-hover); background: #ffffff12; }
.rg-ask__chip:disabled { opacity: .5; cursor: default; }
.rg-ask__chip--ins { font-weight: 700; }
.rg-ask__chip[aria-pressed=true] { border-color: var(--text-secondary); }
.rg-ask__form { display: flex; gap: 6px; margin: 0; }
.rg-ask__q.input-field { flex: 1; min-width: 0; min-height: 44px; height: 44px; padding: 0 12px; font-size: 1rem; }
.rg-ask__send { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-md); background: var(--red); color: #fff; cursor: pointer; }
.rg-ask__send:disabled { background: #ffffff14; color: var(--text-dim); cursor: default; }
.rg-ask__out { display: flex; flex-direction: column; gap: 6px; font-size: .8125rem; line-height: 1.5; color: var(--text-primary); overflow-wrap: anywhere; }
.rg-ask__out--empty { align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; border: 1px dashed var(--border-hover); border-radius: var(--radius-md); color: var(--text-muted); font-size: .75rem; text-align: center; }
/* the bundle sets every p to 1rem / 1.7 and lists to no markers: the card keeps one 13 px scale and numbered insights */
.rg-ask__out p, .rg-ask__out li { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--text-primary); }
.rg-ask__out .rg-ask__said { color: var(--text-muted); font-style: italic; }
.rg-ask__list { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 4px; list-style: decimal; }
.rg-ask__list li::marker { color: var(--text-muted); font-weight: 700; }
.rg-ask__out .rg-ask__kind { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.rg-ask__text { white-space: pre-line; }
.rg-ask__text strong { color: var(--white); font-weight: 700; }
.rg-ask__busy { display: flex; align-items: center; gap: var(--space-sm); padding: 0; color: var(--text-muted); }
/* on a computer (from 1024) the Advanced view's controls are 36 px: its Ask card too, and the benchmark's further down
   the same page (one scale); a phone or tablet in the Advanced view keeps the 44 px taps and the 16 px input */
@media (min-width: 1024px) {
  .rg-coach .rg-ask { gap: 6px; }
  .rg-coach .rg-ask__chip { min-height: 36px; padding: 4px 10px; }
  .rg-coach .rg-ask__q.input-field { min-height: 36px; height: 36px; font-size: .8125rem; }
  .rg-coach .rg-ask__send { width: 36px; height: 36px; }
  .rg-coach .rg-ask__out--empty { min-height: 0; padding: 4px 12px; }
}
/* from 1024 the Ask card fills the left column down to the end of the first row: an answer takes the room that is there
   and scrolls inside it, faded at the bottom while more is below (ask.js sets is-more), instead of pushing "Where the
   time is" down; the empty line keeps its own height */
@media (min-width: 1024px) {
  .rg-coach__left .rg-ask__out { flex: 1 1 0; min-height: 8rem; max-height: 40vh; overflow-y: auto; scrollbar-width: thin; }
  .rg-coach__left .rg-ask__out--empty { flex: 0 0 auto; min-height: 0; }
}
.rg-ask__out.is-more { -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); }

/* the apps on the landing (item 55): four equal cards, 2x2 on the phone, one row from 900 px; one button to /apps */
.rg-apps__sub { color: var(--text-muted); margin: 8px auto 0; max-width: 34rem; }
.rg-apps__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 880px; margin: 0 auto; }
@media (min-width: 900px) { .rg-apps__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rg-apps__card { display: grid; grid-template-rows: 44px auto 1fr; gap: 6px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); color: var(--text-primary); min-width: 0; }
.rg-apps__card b { font-size: 16px; }
.rg-apps__line { color: var(--text-muted); font-size: 14px; line-height: 1.4; }
.rg-apps__card--soon b, .rg-apps__card--soon .rg-apps__ic { opacity: .55; }
.rg-apps__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--bg-elevated); }
.rg-apps__ic svg { width: 24px; height: 24px; }
.rg-apps__cta { display: flex; justify-content: center; margin-top: 20px; }
.rg-apps__cta .btn { min-height: 44px; }
/* landing 'Request your spot' at phone width (audit 12/10): the 1fr track grew to the form's min-content (384 px in a 358 px
   container) and the body's overflow-x:hidden cut the card's right edge; the track may shrink, the card pads less */
@media (max-width: 1024px) { .early-access__layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .early-access__form { padding: 24px; } }
/* Settings at phone width (recheck 12/10): the six tabs scrolled sideways with three off the screen and no hint; they wrap
   into rows of two, 44 px each. The two account-type cards ("I am the pilot" / "Parent / Sponsor") stacked one word per
   line in two 133 px columns: one card per row. */
@media (max-width: 768px) {
  .settings__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-x: visible; }
  .settings__tab { min-height: 44px; min-width: 0; white-space: normal; line-height: 1.2; }
}
@media (max-width: 600px) { .settings__role-selector { grid-template-columns: minmax(0, 1fr); } }