/* File: public/assets/css/components.css | Generated: 2026-06-01 19:54 UTC+03:30 */
/* components.css — part of Live GP styles (split from styles.css) */

  /* ════════════════════════════════════════════════════════════════════
     EXTRACTED ASSETS — icons moved to assets/icons & assets/tyres.
     Themeable icons use CSS mask so they still inherit color / hover.
     ════════════════════════════════════════════════════════════════════ */

  /* Mask-based monochrome icon (color follows currentColor) */
  .ic {
    display: inline-block;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask-image: var(--ic);
            mask-image: var(--ic);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
  }
  /* Delay clock turns amber when a delay is active */
  .delay-trigger.on .ic { background-color: var(--amber); }

  /* Fixed-color icons referenced as <img> */
  .rank-chip img { width: 9px; height: 9px; margin-right: 2px; display: block; }
  .weather-icon img { width: 16px; height: 16px; display: block; }
  .tyre-glyph img { width: 100%; height: 100%; display: block; overflow: visible; }

  /* Track map: downloaded circuit SVG as background + car markers overlaid */
  .map-stage {
    position: absolute;
    inset: 0;
    padding: 14px 14px 40px 14px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .track-bg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    filter: brightness(0.92);
  }
  .cars-overlay {
    position: absolute;
    inset: 14px 14px 40px 14px;
    width: auto;
    height: auto;
  }


  /* ════════════════════════════════════════════════════════════════════
     UTILITY & DATA CLASSES (replaced repeated inline styles)
     ════════════════════════════════════════════════════════════════════ */

  /* Generic hide toggle (driven by render/layout.js) */
  .hidden { display: none !important; }

  /* Clickable map cars + driver-wheel dots */
  .track-car, [data-wheel-code] { cursor: pointer; }

  /* Driver-cell wrapper + table value tints */
  .driver-wrap { display: inline-flex; align-items: center; gap: 8px; }
  .v-sub   { color: var(--ink-2); }
  .v-empty { color: var(--ink-4); }
  .v-green { color: var(--green); }

  /* Track-map legend dots */
  .td-map-legend .dot-s1 { background: #36d399; }
  .td-map-legend .dot-s2 { background: #ffd60a; }
  .td-map-legend .dot-s3 { background: #ff3344; }

  /* Per-icon mask definitions (size + source) */
  .ic-clock      { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");      width: 14px; height: 14px; }
  .ic-fullscreen { --ic: url("/assets/icons/fullscreen.svg"); width: 16px; height: 16px; }
  .ic-fullscreen-exit { --ic: url("/assets/icons/fullscreen-exit.svg"); width: 16px; height: 16px; }
  .ic-gear       { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M19.14%2012.94a7.49%207.49%200%200%200%20.05-.94c0-.32-.02-.63-.06-.94l2.03-1.58a.49.49%200%200%200%20.12-.61l-1.92-3.32a.49.49%200%200%200-.59-.22l-2.39.96a7%207%200%200%200-1.62-.94l-.36-2.54a.49.49%200%200%200-.48-.41h-3.84a.49.49%200%200%200-.48.41l-.36%202.54c-.59.24-1.13.56-1.62.94l-2.39-.96a.49.49%200%200%200-.59.22L2.74%208.87a.49.49%200%200%200%20.12.61l2.03%201.58c-.04.31-.06.62-.06.94s.02.63.06.94l-2.03%201.58a.49.49%200%200%200-.12.61l1.92%203.32c.13.24.4.32.59.22l2.39-.96c.5.38%201.03.7%201.62.94l.36%202.54c.05.24.25.41.48.41h3.84c.23%200%20.43-.17.48-.41l.36-2.54c.59-.24%201.12-.56%201.62-.94l2.39.96c.24.09.51%200%20.59-.22l1.92-3.32a.49.49%200%200%200-.12-.61l-2.01-1.58zM12%2015.6A3.6%203.6%200%201%201%2012%208.4a3.6%203.6%200%200%201%200%207.2z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");       width: 16px; height: 16px; }
  .ic-play       { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M8%205v14l11-7z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");       width: 12px; height: 12px; }
  .ic-pause      { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M7%205h4v14H7zM13%205h4v14h-4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");      width: 12px; height: 12px; }
  .ic-skip-back  { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2012%205%208l5-4%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M14%2012%209%208l5-4%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");  width: 16px; height: 16px; }
  .ic-skip-fwd   { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012%207%208%202%204%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M7%2012l5-4-5-4%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");   width: 16px; height: 16px; }
  .ic-close      { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M4%204l10%2010M14%204L4%2014%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");      width: 16px; height: 16px; }
  .ic-grip       { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22%23000%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%224%22%20r%3D%221.3%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%224%22%20r%3D%221.3%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%226%22%20cy%3D%228%22%20r%3D%221.3%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%228%22%20r%3D%221.3%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2212%22%20r%3D%221.3%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2212%22%20r%3D%221.3%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E");       width: 14px; height: 14px; }
  .ic-radio-play { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M8%205v14l11-7z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); width: 11px; height: 11px; }

  /* Team colour tokens (driver pill + telemetry/H2H banner) */
  .team-mercedes { --team: #27f4d2; --num-text: #000; --code-bg: #0a0c10; --code-text: #27f4d2; }
  .team-redbull  { --team: #3671c6; --num-text: #fff; --code-bg: #f3f4f7; --code-text: #3671c6; }
  .team-ferrari  { --team: #e80020; --num-text: #fff; --code-bg: #0a0c10; --code-text: #e80020; }
  .team-mclaren  { --team: #ff8000; --num-text: #000; --code-bg: #0a0c10; --code-text: #ff8000; }
  .team-alpine   { --team: #00a1e8; --num-text: #000; --code-bg: #0a0c10; --code-text: #00a1e8; }
  .team-rb       { --team: #6692ff; --num-text: #000; --code-bg: #0a0c10; --code-text: #6692ff; }
  .team-haas     { --team: #b6babd; --num-text: #000; --code-bg: #0a0c10; --code-text: #b6babd; }
  .team-williams { --team: #00a0de; --num-text: #000; --code-bg: #0a0c10; --code-text: #00a0de; }
  .team-audi     { --team: #52e252; --num-text: #000; --code-bg: #0a0c10; --code-text: #52e252; }
  .team-aston    { --team: #229971; --num-text: #fff; --code-bg: #0a0c10; --code-text: #229971; }
  .team-cadillac { --team: #c9a96e; --num-text: #000; --code-bg: #0a0c10; --code-text: #c9a96e; }


  /* Segmented control (General settings tab) */
  .seg-control {
    display: inline-flex;
    gap: 4px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 4px;
  }
  .seg-option {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--ink-3);
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 7px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
    white-space: nowrap;
  }
  .seg-option:hover { color: var(--ink-2); }
  .seg-option.active {
    background: var(--brand);
    color: #fff;
  }


  /* Tyre laps/start numbers tinted by compound */
  .tyre-cell.t-soft   .tyre-laps, .tyre-cell.t-soft   .tyre-start { color: #ff3344; }
  .tyre-cell.t-medium .tyre-laps, .tyre-cell.t-medium .tyre-start { color: #ffd60a; }
  .tyre-cell.t-hard   .tyre-laps, .tyre-cell.t-hard   .tyre-start { color: #f1f2f5; }
  .tyre-cell.t-inter  .tyre-laps, .tyre-cell.t-inter  .tyre-start { color: #36d399; }
  .tyre-cell.t-wet    .tyre-laps, .tyre-cell.t-wet    .tyre-start { color: #4ea0ff; }


  /* ── "Tyre Strategy" column — stints as a lap-proportional bar, with two marker lanes:
        pit-lane passes point down from above the bar, tyre changes point up from below it.
        The compound reads from the bar colour, so there is no on-bar icon. ── */
  .ts {
    --ts-bar-top: 16px;
    --ts-bar-height: 10px;
    position: relative;
    display: inline-block;
    width: 408px;
    height: 42px;
    vertical-align: middle;
  }
  .ts-track {
    position: absolute;
    left: 0; right: 0;
    top: var(--ts-bar-top);
    height: var(--ts-bar-height);
    border-radius: 5px;
    overflow: hidden;
  }
  .ts-stint {
    position: absolute;
    top: 0; bottom: 0;
    background: var(--ts-c);
  }
  /* A scrubbed (not new) tyre keeps its solid compound fill and carries a dense
     diagonal hatch on top — so even a one-lap segment stays fully visible while still
     reading clearly as "not new" (unlike sparse dashes that break a short segment up). */
  .ts-stint.used {
    background-color: var(--ts-c);
    background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.46) 0 1.5px, transparent 1.5px 4px);
  }
  .ts-stint.t-soft,   .ts-pit.t-soft   { --ts-c: #ff3344; }
  .ts-stint.t-medium, .ts-pit.t-medium { --ts-c: #ffd60a; }
  .ts-stint.t-hard,   .ts-pit.t-hard   { --ts-c: #f1f2f5; }
  .ts-stint.t-inter,  .ts-pit.t-inter  { --ts-c: #36d399; }
  .ts-stint.t-wet,    .ts-pit.t-wet    { --ts-c: #4ea0ff; }

  /* Tyre change — a triangle in the lane below the bar pointing up at the colour boundary,
     tinted by the fitted compound, with the lap beneath it. Zero-width anchor on the lap. */
  .ts-pit {
    position: absolute;
    top: 0; bottom: 0;
    width: 0;
    pointer-events: none;
  }
  .ts-pit-mark {
    position: absolute;
    top: 27px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 6px solid var(--ts-c);
  }
  /* Lap number — its vertical `top` is set inline per stagger row so clustered numbers
     stack downward instead of overlapping. */
  .ts-pit-lap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
    color: var(--ts-c, var(--ink-2));
  }

  /* Pit-lane pass (no tyre change) — a grey triangle in the lane above the bar pointing
     down at it, with the lap above; kept clear of the change markers below. */
  .ts-pass {
    position: absolute;
    top: 0; bottom: 0;
    width: 0;
    pointer-events: none;
  }
  .ts-pass-lap {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
    color: var(--ink-2);
  }
  .ts-pass-mark {
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 4.5px solid transparent;
    border-right: 4.5px solid transparent;
    border-top: 6px solid var(--ink-2);
  }


  /* ── General settings tab — card layout ── */
  .gen-list { display: flex; flex-direction: column; gap: 12px; }
  .gen-card {
    background: var(--bg-3);
    border: 1px solid var(--line-2);
    border-radius: 12px;
    padding: 16px;
  }
  .gen-row { display: flex; align-items: center; gap: 14px; }
  .gen-icon {
    flex: 0 0 38px;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid var(--line-2);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink-2);
  }
  .gen-icon svg { width: 19px; height: 19px; display: block; }
  .gen-meta { flex: 1; min-width: 0; }
  .gen-title {
    font-size: 14px; font-weight: 700; color: var(--ink);
    letter-spacing: 0.01em; line-height: 1.2;
  }
  .gen-desc {
    font-size: 12px; color: var(--ink-3); margin-top: 3px; font-weight: 500;
  }
  .gen-seg-full {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 14px;
    width: 100%;
  }
  .gen-seg-full .seg-option { padding: 8px 4px; text-align: center; }


  /* ── General tab — colored icon tiles + toggle rows ── */
  .gen-icon.icon-theme   { color: #ffd60a; }
  .gen-icon.icon-size    { color: #62a9ff; }
  .gen-icon.icon-units   { color: #36d399; }
  .gen-icon.icon-clock   { color: #d864ff; }
  .gen-icon.icon-fastest { color: #ff8a3d; }
  .gen-icon.icon-radio   { color: #ff5470; }

  .gen-toggle-row { display: flex; align-items: center; gap: 14px; }
  .gen-toggle-row .gen-meta { flex: 1; }
  .gen-option-row {
    align-items: stretch;
    flex-direction: column;
  }
  .gen-option-row .seg-control {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }
  .gen-option-row .seg-control[data-setting="tyre-age-display"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .gen-option-row .seg-option {
    min-width: 0;
    min-height: 38px;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .gen-divider {
    height: 1px;
    background: var(--line);
    margin: 14px 0;
  }


  /* General-tab seg options with icons */
  .seg-control[data-setting="theme"] .seg-option,
  .gen-seg-full .seg-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .seg-control[data-setting="theme"] .seg-option svg { width: 14px; height: 14px; flex: 0 0 14px; }
  .gen-seg-full .seg-option { flex-direction: column; gap: 5px; padding: 9px 4px; }
  .size-glyph {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    line-height: 1;
    display: inline-block;
    width: 20px; text-align: center;
  }


  /* Head-to-Head banner as a clickable picker (mirrors telemetry banner) */
  .h2h-banner-picker { position: relative; cursor: pointer; }
  .h2h-banner-picker:hover { background: var(--bg-2); }
  .h2h-caret {
    width: 11px; height: 11px;
    color: var(--ink-3);
    margin-left: auto;
    flex: 0 0 11px;
  }
  .h2h-select {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
    appearance: none;
    border: 0; padding: 0; margin: 0;
    font: inherit;
  }
  .h2h-select option { background: var(--bg-2); color: var(--ink); font-family: 'Inter', sans-serif; }


  /* DRS indicator badge — top-left corner of the telemetry gauge */
  .tel-dial { position: relative; }
  .drs-badge {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 2;
    display: inline-flex; align-items: center;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.14em;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    color: var(--ink-3);
  }
  .drs-badge.on {
    background: rgba(46, 230, 138, 0.12);
    border-color: rgba(46, 230, 138, 0.45);
    color: var(--green);
  }


  /* H2H DRS badge — smaller, fits the mini dial */
  .h2h-drs {
    top: 5px; left: 5px;
    padding: 2px 6px;
    font-size: 8px;
    letter-spacing: 0.12em;
    border-radius: 5px;
  }


  /* Session status badge (LIVE / REPLAY) next to RACE */
  .session-row { display: inline-flex; align-items: center; gap: 8px; }
  .status-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 7px;
    border-radius: 5px;
    font-family: 'Inter', sans-serif;
    font-size: 8.5px; font-weight: 800;
    letter-spacing: 0.14em;
  }
  .status-badge::before {
    content: '';
    width: 5px; height: 5px; border-radius: 50%;
    background: currentColor;
  }
  .status-badge.live {
    background: rgba(255, 30, 30, 0.12);
    border: 1px solid rgba(255, 30, 30, 0.4);
    color: var(--brand);
  }
  .status-badge.replay {
    background: rgba(108, 114, 128, 0.14);
    border: 1px solid rgba(108, 114, 128, 0.4);
    color: var(--ink-2);
  }
/* File: public/assets/css/components.css | Generated: 2026-06-01 19:54 UTC+03:30 */