/* /web2 Tracks + Cars tabs — transcribed from TracksScreen.kt, TrackDetailScreen.kt,
   TrackPreview.kt and CarsScreen.kt (dp = px).

   Compose sizes its grids from the CONTENT width (BoxWithConstraints.maxWidth); media
   queries see the viewport, so each Compose breakpoint is shifted by the shell chrome:
   <840px viewport the content is vw-32 (16px padding each side), >=840px it is
   min(vw-80, 1400)-48 (80px rail + 24px padding each side). */

/* ── page / detail headers ─────────────────────────────────────────────── */
.tc-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.tc-head h1 { margin: 0; }

.detail-head { display: flex; align-items: center; gap: 12px; margin: -4px -4px 16px; min-width: 0; }
.detail-head h1 { margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.circle-btn {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: rgba(11, 12, 15, 0.55); border: 1px solid var(--outline);
  display: flex; align-items: center; justify-content: center; color: var(--text-high);
}
.circle-btn svg { width: 22px; height: 22px; }

.center-msg { padding: 48px 16px; text-align: center; }

/* ── shared bits ───────────────────────────────────────────────────────── */
.card14 { background: var(--surface1); border: 1px solid var(--outline); border-radius: 14px; }

/* MetaChip (Components.kt): Surface2, 7px radius, 9/4 padding, labelMedium TextMed */
.meta-chip {
  display: inline-flex; align-items: center; border-radius: 7px;
  background: var(--surface2); padding: 4px 9px; color: var(--text-med); white-space: nowrap;
}

/* ClassBadge — track detail variant (5px radius, 6/2 padding, labelSmall bold) */
.class-badge {
  display: inline-flex; align-items: center; border-radius: 5px; padding: 2px 6px;
  background: var(--pill-c, var(--class-mixed)); color: #fff;
  font-size: 11px; line-height: 16px; font-weight: 700; white-space: nowrap;
}
/* onBadgeText(): light backgrounds carry carbon text */
.class-badge.c-gte, .class-badge.c-mixed { color: var(--carbon); }
/* cars variant (CarsScreen.kt: 7px radius, 8/4 padding, labelMedium black) */
.class-badge--car { border-radius: 7px; padding: 4px 8px; font-size: 12px; font-weight: 900; }

.sec-label { color: var(--text-low); font-weight: 700; }

.hint {
  background: var(--surface1); border: 1px solid var(--outline); border-radius: 12px;
  padding: 16px; text-align: center; color: var(--text-med);
}

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }

/* ── TrackPreview.kt: bg photo + scrim, centered map, emblem TL, flag TR ── */
.track-preview { position: relative; background: var(--surface2); height: 104px; overflow: hidden; flex: none; }
.track-preview--lg { height: 180px; border-radius: 12px; }
.tp-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); }
.tp-map { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; }
.tp-logo { position: absolute; top: 8px; left: 8px; height: 22px; width: auto; max-width: 45%; }
.track-preview--lg .tp-logo { height: 30px; }
.tp-flag { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.track-preview--lg .tp-flag { width: 26px; height: 26px; }

/* ── TracksScreen.kt grid: 1/2/3/4 cols at content 340/700/1060 ──────────── */
.tracks-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 372px) { .tracks-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 732px) { .tracks-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1188px) { .tracks-grid { grid-template-columns: repeat(4, 1fr); } }

.track-card {
  display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
  background: var(--surface1); border: 1px solid var(--outline);
}
.track-card-body { padding: 10px; display: flex; flex-direction: column; gap: 6px; }
/* minLines = 2: reserve 2 lines so every card in a row is the same height */
.track-card-title {
  min-height: 40px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.chip-row { display: flex; gap: 6px; overflow: hidden; }

/* ── TrackDetailScreen.kt ────────────────────────────────────────────────── */
.td-stack { display: flex; flex-direction: column; gap: 12px; }
/* wide (content >= 900px <=> viewport >= 1028px): pairs go side by side */
.td-pair { display: flex; flex-direction: column; gap: 12px; }
.td-block { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (min-width: 1028px) {
  .td-pair { flex-direction: row; align-items: stretch; }
  .td-pair > .td-block, .td-pair > .card14 { flex: 1; min-width: 0; }
  .td-block { gap: 8px; }
  .td-block > .card14, .td-block > .rows-card { flex: 1; }
}

.track-card-lg { padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.tc-info { display: flex; flex-direction: column; gap: 4px; }
.tc-name { font-weight: 700; }
.track-card-lg .chip-row { gap: 8px; }
@media (min-width: 1028px) {
  .td-hero-pair.has-scheme > .track-card-lg .track-preview--lg {
    flex: 1 1 auto;
    height: auto;
    min-height: 260px;
  }
  .td-hero-pair.has-scheme > .track-card-lg .tc-info { flex: none; }
}

.scheme-card { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.scheme-img { width: 100%; height: auto; min-height: 120px; border-radius: 12px; }

.track-records-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 12px;
  flex-wrap: wrap;
}
.races-header { color: var(--text-med); font-weight: 600; min-width: 0; }
.patch-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  max-width: 100%;
  height: 30px;
  padding: 0 28px 0 9px;
  border: 1px solid var(--outline);
  border-radius: 8px;
  background: var(--surface1);
}
.patch-filter::after {
  content: "";
  position: absolute;
  right: 11px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -4px;
  border-right: 2px solid var(--text-low);
  border-bottom: 2px solid var(--text-low);
  transform: rotate(45deg);
  pointer-events: none;
}
.patch-filter label {
  color: var(--text-low);
  font-weight: 800;
  letter-spacing: 0.7px;
}
.patch-filter:focus-within {
  border-color: color-mix(in srgb, var(--amber) 70%, var(--outline));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 16%, transparent);
}
.patch-select {
  width: auto;
  min-width: 104px;
  max-width: 156px;
  height: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-high);
  color-scheme: dark;
  padding: 0;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.patch-select::-ms-expand { display: none; }
.patch-select option { background: var(--surface1); color: var(--text-high); }
@media (max-width: 560px) {
  .track-records-head { align-items: stretch; }
  .races-header { width: 100%; }
  .patch-filter { width: 100%; }
  .patch-select { flex: 1; max-width: none; min-width: 0; }
}

.bestlap-card { display: flex; flex-direction: column; gap: 6px; padding: 14px; }
.bl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lap-big { font-size: 24px; line-height: 32px; font-weight: 700; }

.rows-card { border: 1px solid var(--outline); border-radius: 12px; overflow: hidden; }
.attempt-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
.attempt-row:nth-child(even) { background: var(--surface2); }
.ar-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ar-1line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lap-mid { font-size: 14px; line-height: 20px; font-weight: 700; flex: none; }
.lap-sm { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.6px; flex: none; }

/* ── CarsScreen.kt grid: 1/2/3/4 cols at content 360/920/1240 ────────────── */
.car-section { margin-bottom: 12px; }
.car-sec-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px; margin-bottom: 12px;
}
.sec-cat { font-weight: 900; white-space: nowrap; }
.sec-count { color: var(--pill-c, var(--text-med)); font-weight: 900; white-space: nowrap; }

.cars-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 392px) { .cars-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1048px) { .cars-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1368px) { .cars-grid { grid-template-columns: repeat(4, 1fr); } }

.car-card {
  display: flex; flex-direction: column; min-height: 232px;
  border-radius: 14px; overflow: hidden; background: var(--surface1);
  border: 1px solid color-mix(in srgb, var(--pill-c, var(--outline)) 58%, transparent);
}
.car-hero { position: relative; height: 118px; background: var(--surface2); flex: none; }
.ch-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ch-grad { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, transparent 52%, rgba(11, 12, 15, 0.88) 100%); }
.ch-badge { position: absolute; top: 10px; left: 10px; }
.ch-logo { position: absolute; top: 8px; right: 8px; width: 64px; height: 44px; object-fit: contain; }
.car-body { padding: 10px; display: flex; flex-direction: column; gap: 5px; }
.car-mfr { color: var(--pill-c, var(--text-med)); font-weight: 900; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.car-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.car-engine { color: var(--text-med); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fact-row { display: flex; flex-wrap: wrap; gap: 6px; }
.fact-chip {
  display: inline-flex; align-items: center; height: 24px; border-radius: 7px;
  background: var(--surface2); padding: 0 8px; color: var(--text-med);
  font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── CarDetailScreen (CarsScreen.kt) ─────────────────────────────────────── */
.cd-stack { display: flex; flex-direction: column; gap: 12px; }

.car-hero-card { overflow: hidden; display: flex; flex-direction: column; }
.chc-hero { position: relative; height: 210px; background: var(--surface2); }
.chc-grad { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(11, 12, 15, 0.86) 100%); }
.chc-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.chip-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.chc-name { margin: 0; font-weight: 900; }
.car-desc { padding: 14px; color: var(--text-med); }

.car-summary-card { padding: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.mfr-row { display: flex; align-items: center; gap: 7px; }
.mfr-logo { width: 32px; height: 18px; object-fit: contain; }
.mfr-name { color: var(--text-low); font-weight: 700; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.section-title { margin: 0; font-weight: 700; }

.gallery-strip { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gallery-img {
  width: 238px; aspect-ratio: 16 / 9; flex: none; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--outline); background: var(--surface2);
}

.specs-card { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.spec-row { display: flex; gap: 8px; align-items: stretch; }
.spec-cell {
  flex: 1; min-width: 0; min-height: 58px; border-radius: 10px;
  background: var(--surface2); padding: 8px 10px;
  display: flex; flex-direction: column; gap: 3px;
}
.spec-label { color: var(--text-low); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spec-value { color: var(--text-high); font-weight: 600; }
.spec-row:not(.spec-row--wide) .spec-value { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.spec-spacer { flex: 1; }

/* liveryColumns = 2 when content >= 840px <=> viewport >= 968px */
.liveries-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 968px) { .liveries-grid { grid-template-columns: repeat(2, 1fr); } }
.livery-row {
  display: flex; align-items: center; gap: 10px; padding: 10px;
  border-radius: 12px; background: var(--surface1); border: 1px solid var(--outline);
}
.livery-img { width: 104px; height: 64px; flex: none; border-radius: 8px; background: var(--surface2); object-fit: contain; }
.livery-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.livery-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }