/* Pilots (global profile, garage, sponsors, avatar crop) and the club race dashboard. Tokens from brand/tokens.css. */
.gp-tabs { margin-top: var(--s-4); }
.gp-edit .card-pad > h2 { margin: 0; }
.gp-link { margin-left: 2px; text-decoration: none; }

/* directory */
.pilot-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.pilot-card { display: flex; gap: var(--s-4); align-items: center; padding: var(--s-4); text-decoration: none; color: inherit; height: 100%; }
.pilot-card:hover { border-color: var(--brand); }
.pilot-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; align-items: flex-start; }
.pilot-card-name { font-family: var(--font-display); font-style: var(--display-style); font-size: var(--fs-lg); overflow-wrap: anywhere; }
.club-chips { flex-wrap: wrap; }
.club-chips .chip { text-decoration: none; height: auto; min-height: 28px; padding: 4px 10px; white-space: normal; }

/* sponsors */
.sponsor-strip { display: flex; flex-direction: column; gap: var(--s-2); }
.sponsor-strip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-3); }
.sponsor-strip li > a, .sponsor-strip li > span, .sponsor-strip li { display: inline-flex; align-items: center; gap: var(--s-2); }
.sponsor-strip li { padding: 8px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); font-weight: 650; font-size: var(--fs-sm); color: var(--text); }
.sponsor-strip li a { color: inherit; text-decoration: none; }
.sponsor-strip li.is-featured { border-color: var(--gold); }
.sponsor-strip img { height: 36px; width: auto; max-width: 160px; object-fit: contain; }
.sponsor-list { list-style: none; margin: 0; padding: 0; }
.sponsor-row { display: grid; grid-template-columns: 72px 1fr auto; gap: var(--s-4); align-items: start; padding: var(--s-4); border-top: 1px solid var(--line); }
.sponsor-logo { width: 72px; height: 48px; display: grid; place-items: center; background: var(--surface-2); border-radius: var(--r-sm); }
.sponsor-logo img { max-width: 64px; max-height: 40px; object-fit: contain; }
.sponsor-actions { flex-wrap: nowrap; }
@media (max-width: 560px) { .sponsor-row { grid-template-columns: 56px 1fr; } .sponsor-actions { grid-column: 1 / -1; } }

/* garage */
.garage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.garage-item { display: flex; gap: var(--s-4); align-items: center; padding: var(--s-3) var(--s-4); }
.garage-photo { width: 72px; height: 72px; border-radius: var(--r-md); object-fit: cover; flex: none; background: var(--surface-2); border: 1px solid var(--line); }
.garage-photo.quad { display: grid; place-items: center; color: var(--brand); }
.garage-photo.quad svg { width: 70%; height: 70%; }
.garage-card.is-race { border-color: var(--brand); }
.garage-card details summary { cursor: pointer; font-weight: 650; }
.quad-form { margin-top: var(--s-3); }
.cutout-preview { background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface-3) 0 50%) 0 0 / 20px 20px; border-radius: var(--r-md); padding: var(--s-3); width: fit-content; }
.cutout-preview img { max-height: 220px; display: block; }

/* crop island */
.crop { display: flex; flex-direction: column; gap: var(--s-2); }
.crop-pick { position: relative; overflow: hidden; width: fit-content; }
.crop-pick input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.crop-stage { position: relative; max-width: 360px; touch-action: none; user-select: none; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
.crop-stage img { display: block; width: 100%; height: auto; }
.crop-box { position: absolute; border: 2px solid var(--brand); border-radius: 50%; box-shadow: 0 0 0 9999px rgb(0 0 0 / .55); cursor: move; outline: none; }
.crop-box:focus-visible { border-color: var(--gold); }

/* dashboard */
.dash { padding-top: var(--s-6); padding-bottom: var(--s-7); display: flex; flex-direction: column; gap: var(--s-5); }
.dash-head { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; align-items: flex-end; }
.dash-head .h1 { margin: 0; }
.dash-meta { flex-wrap: wrap; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--s-4); align-items: start; }
.dash-side { display: grid; gap: var(--s-4); }
@media (max-width: 900px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }
.dash > *, .dash-grid > *, .dash-side > * { min-width: 0; }
@media (max-width: 640px) { .dash .badge-pb-soft { display: none; } .dash-list li { flex-wrap: wrap; } }
.dash-list { list-style: none; margin: 0; padding: var(--s-2) var(--s-4) var(--s-4); display: grid; gap: var(--s-2); counter-reset: d; }
.dash-list li { display: flex; justify-content: space-between; gap: var(--s-3); align-items: baseline; }
.dash-list li > span:first-child { min-width: 0; }
.dash-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.data .pilot .pname { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-delta .up { color: var(--ok); font-weight: 700; font-size: var(--fs-xs); }
.dash-delta .down { color: var(--danger); font-weight: 700; font-size: var(--fs-xs); }
.badge-pb { background: var(--pb); color: #fff; border-color: transparent; }
.badge-pb-soft { color: var(--pb); border-color: var(--pb); background: transparent; }
.is-pb-lite { color: var(--text); }
.dash-season { white-space: nowrap; }
.dash-spark { display: block; width: 64px; height: 16px; margin-left: auto; margin-top: 2px; }
.dash-spark polyline { fill: none; stroke: var(--brand); stroke-width: 2; vector-effect: non-scaling-stroke; }
.dash-live .data td, .dash-live .data th { padding-top: 8px; padding-bottom: 8px; }
.dash-board .chan { margin-right: 6px; }
/* TV: big type, no chrome, everything on one 1920×1080 screen */
.dash-tv-body .backdrop { display: none; }
.dash-tv { max-width: none; padding: 28px 40px; font-size: 1.25rem; gap: 22px; }
.dash-tv .h1 { font-size: 3rem; }
.dash-tv .data td, .dash-tv .data th { font-size: 1.15rem; padding-top: 8px; padding-bottom: 8px; }
.dash-tv .dash-pilots td.hide-md, .dash-tv .dash-pilots th.hide-md { display: table-cell; }
.dash-tv .dash-grid { grid-template-columns: minmax(0, 2.2fr) minmax(320px, 1fr); }
.dash-tv .dash-list li { font-size: 1.15rem; }
.dash-tv .avatar { width: 40px; height: 40px; }
.dash-tv .card-head h2 { font-size: 1.5rem; }
@media (min-width: 641px) { .dash td.hide-sm, .dash th.hide-sm { display: table-cell; } }

/* Account → Goggles & OSD (goggles.js). The preview is the HDZero 50×18 OSD grid on a 16:9 screen: every
   character cell is 2cqi wide (50 columns) and 56.25/18 cqi tall, so it scales with the card on any screen. */
.gog-secret { display: grid; gap: var(--s-2); margin: 0; }
.gog-secret > div { display: grid; grid-template-columns: minmax(110px, 160px) 1fr; gap: var(--s-3); align-items: baseline; }
.gog-secret dt { color: var(--text-3); font-size: var(--fs-sm); }
.gog-secret dd { margin: 0; overflow-wrap: anywhere; }
.gog-secret dd.is-revealed { color: var(--warn); }
.gog-toggles { display: grid; gap: var(--s-2) var(--s-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.gog-toggles label { display: flex; align-items: flex-start; gap: var(--s-2); flex-wrap: nowrap; }
.gog-toggles input { margin-top: 3px; flex: none; }
.osd-screen { position: relative; container-type: inline-size; width: 100%; max-width: 820px; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden;
  background: radial-gradient(120% 90% at 50% 40%, #2b3a4a 0%, #121a24 70%), #121a24; border: 1px solid var(--line);
  background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px), radial-gradient(120% 90% at 50% 40%, #2b3a4a 0%, #121a24 70%);
  background-size: 2cqi calc(56.25cqi / 18), 2cqi calc(56.25cqi / 18), auto; cursor: crosshair; }
.osd-screen pre { margin: 0; position: absolute; inset: 0; font: 700 3.333cqi/calc(56.25cqi / 18) var(--font-mono); letter-spacing: 0; color: #f4f7fb;
  text-shadow: 0 0 2px #000, 0 0 1px #000; white-space: pre; pointer-events: none; }
.osd-cells { position: absolute; inset: 0; pointer-events: none; }
.osd-cell { position: absolute; height: calc(56.25cqi / 18); outline: 1px dashed transparent; border-radius: 2px; }
.osd-cell.is-picked { outline-color: var(--brand); background: color-mix(in oklab, var(--brand) 22%, transparent); }
.osd-table td { vertical-align: middle; }
.osd-table .input-sm { height: 34px; padding: 0 var(--s-2); min-width: 0; }
.osd-table td.num .input-sm { width: 4.5em; text-align: right; }
.osd-table tr.is-picked td { background: color-mix(in oklab, var(--brand) 10%, transparent); }
.linkish { background: none; border: 0; padding: 0; font: inherit; font-weight: 650; color: var(--text); cursor: pointer; text-align: left; }
.linkish:hover, .linkish:focus-visible { color: var(--accent); }
@media (max-width: 640px) {
  .gog-secret > div { grid-template-columns: 1fr; gap: 2px; }
  .osd-table td.num .input-sm, .osd-table td .select { width: 100%; text-align: left; }
  .data.stack-sm.osd-table td.cell-wide { grid-column: 1 / -1; }
  .data.stack-sm.osd-table td.cell-pos { grid-row: 1; align-self: center; }
  .data.stack-sm.has-pos.osd-table tr { grid-template-columns: 2.4rem minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.6fr); }
  .data.stack-sm.osd-table td:nth-child(3) { grid-column: 1 / 3; }
}
/* ▶ links and the on-page player (video links, batch 3) */
.watch-sm { padding: 2px 8px; font-size: 11px; line-height: 1.4; flex: none; }
.row-tight { display: inline-flex; align-items: center; gap: var(--s-2); flex: none; }
.dash-player { margin-bottom: var(--s-4); overflow: hidden; }
.dash-player .player { border-radius: 0; }
.dash-player-foot { padding: var(--s-2) var(--s-4); }
.dash-heats { max-height: 22rem; overflow-y: auto; }
.data .pilot .watch-sm { margin-left: 2px; }
@media (max-width: 1360px) { .dash .dash-pilots td.hide-md, .dash .dash-pilots th.hide-md { display: none; } }

/* ───── Goggles 2: the drag-and-drop screen editor (osd_editor.js) ───── */
.osd-ed-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: var(--s-5); align-items: start; }
.osd-ed-stage { display: grid; gap: var(--s-3); min-width: 0; }
.osd-ed-screen { max-width: none; cursor: default; touch-action: none; user-select: none; }
.osd-chips { position: absolute; inset: 0; }
.osd-chip { position: absolute; padding: 0; margin: 0; border: 1px dashed color-mix(in oklab, var(--brand) 55%, transparent); border-radius: 3px;
  background: transparent; cursor: grab; touch-action: none; min-width: 0; min-height: 0; }
.osd-chip:hover, .osd-chip:focus-visible { background: color-mix(in oklab, var(--brand) 14%, transparent); outline: none; border-style: solid; }
.osd-chip.is-picked { border: 2px solid var(--brand); background: color-mix(in oklab, var(--brand) 20%, transparent); }
.osd-chip.is-dragging { cursor: grabbing; box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 35%, transparent); }
.osd-ed-presets { gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.osd-ed-panel { position: sticky; top: var(--s-4); }
.osd-ed-list { list-style: none; margin: 0; padding: var(--s-2) var(--s-3); display: grid; gap: 2px; max-height: 46vh; overflow: auto; }
.osd-ed-item { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-2); align-items: center; padding: 6px var(--s-2); border-radius: var(--r-sm); }
.osd-ed-item.is-picked { background: color-mix(in oklab, var(--brand) 12%, transparent); }
.osd-ed-item .linkish { text-align: left; font-weight: 600; }
.osd-ed-detail { border-top: 1px solid var(--line); }
.osd-ed-detail .grid-2 { gap: var(--s-3); }
.osd-ed-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-4); }
@media (max-width: 900px) { .osd-ed-grid { grid-template-columns: minmax(0, 1fr); } .osd-ed-panel { position: static; } .osd-ed-list { max-height: none; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }

/* Sticky save bar on phones (profile editor sections). */
@media (max-width: 640px) {
  .gp-savebar { position: sticky; bottom: 0; z-index: 6; margin: var(--s-4) calc(-1 * var(--s-4)) 0; padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
    background: color-mix(in oklab, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
  .gp-savebar .btn-primary { flex: 1; }
}

/* ───── The profile hub (phones drill in; desktop keeps the tabs) ───── */
.gp-back { display: none; }
@media (max-width: 640px) {
  .gp-tabs { display: none; }
  .gp-back { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-2); font-weight: 650; color: var(--brand); }
}
.gp-hub { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.gp-hub a { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-4); border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface); min-width: 0; }
.gp-hub a:hover { border-color: var(--brand); }
.gp-hub .gp-hub-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in oklab, var(--brand) 14%, transparent); color: var(--brand); }
.gp-hub strong { display: block; }
.gp-hub .gp-hub-st { display: block; font-size: var(--fs-sm); color: var(--text-3); overflow-wrap: anywhere; }
.gp-hub .gp-hub-st.is-ok { color: var(--ok, var(--brand)); }
.gp-hub .chev { color: var(--text-3); font-size: 1.4rem; }

/* ───── Race-day self-service (/me/goggles) ───── */
.self-chans { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: var(--s-2); }
.self-chans button { font: 800 1.05rem/1 var(--font-mono); padding: var(--s-3) 0; }
.self-chans button.is-current { border-color: var(--brand); color: var(--brand); }
.self-status { min-height: 1.5em; }

/* ───── Pilot explainers (/pilots/race-day, /pilots/elrs-setup) ───── */
.px-hero { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; padding-block: var(--s-7) var(--s-6); }
.px-hero h1 { font: italic 800 clamp(2rem, 5vw, 3.4rem)/1.02 var(--font-display); font-stretch: 125%; letter-spacing: -0.02em; margin: 0 0 var(--s-3); }
.px-hero img { width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid var(--line); }
.px-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.px-card { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); position: relative; }
.px-card::before, .px-card::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--brand); opacity: .7; }
.px-card::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.px-card::after { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.px-card h3 { font: italic 800 1.15rem/1.15 var(--font-display); font-stretch: 115%; margin: var(--s-2) 0; }
.px-card p { margin: 0; color: var(--text-2); }
.px-safe { border-left: 3px solid var(--brand); padding: var(--s-4) var(--s-5); background: color-mix(in oklab, var(--brand) 7%, transparent); border-radius: 0 var(--r-md) var(--r-md) 0; }
.px-safe ul { margin: var(--s-2) 0 0; padding-left: 1.2em; display: grid; gap: 6px; }
.px-steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
.px-steps li { counter-increment: s; display: grid; grid-template-columns: 2.6rem 1fr; gap: var(--s-3); align-items: start; }
.px-steps li::before { content: counter(s); width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; font: 800 1.1rem/1 var(--font-display);
  background: var(--brand); color: var(--brand-ink, #04121a); }
.px-steps h3 { margin: 4px 0 4px; font-size: 1.05rem; }
.px-steps p { margin: 0; color: var(--text-2); }
@media (max-width: 760px) { .px-hero { grid-template-columns: minmax(0, 1fr); padding-block: var(--s-5) var(--s-4); } }