/* File: public/assets/css/layout.css | Generated: 2026-06-05 16:27 UTC+03:30 */
/* layout.css — part of Live GP styles (split from styles.css) */

  #root {
    --rt-playback-reserved-height: 0px;
  }
  #root[data-timing-mode="replay"] {
    --rt-playback-reserved-height: 60px;
  }

  /* ---------- Top header ---------- */
  .topbar {
    height: 56px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 24px;
    position: relative;
    z-index: 30;
  }
  .brand-block { display: flex; align-items: center; gap: 18px; }
  .logo {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
    display: flex; align-items: center; gap: 8px;
  }
  .logo:hover { color: var(--ink); }
  .logo:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 4px;
    border-radius: 6px;
  }
  .logo-mark {
    width: 18px; height: 18px;
    border-radius: 4px;
    background: var(--brand);
    position: relative;
    box-shadow: 0 0 0 1px rgba(255,30,30,0.4), 0 0 22px var(--brand-glow);
  }
  .logo-mark::after {
    content:''; position:absolute; inset: 5px 3px 5px 3px;
    background: #fff; border-radius: 1px;
    clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
  }
  .race-meta {
    display: flex; flex-direction: column; line-height: 1.1;
    padding-left: 18px;
    white-space: nowrap;
    border-left: 1px solid var(--line);
  }
  .race-meta .name {
    font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink);
  }
  .race-meta .session {
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em;
    color: var(--brand);
  }
  .session-row { margin-top: 3px; }
  .session-row .session { margin-top: 0; }
  .status-badge { position: relative; top: -0.5px; }
  .race-meta .name.name-empty { color: var(--muted, #8a92a4); }
  .race-meta .session.session-empty { color: var(--muted, #8a92a4); letter-spacing: 0.12em; }
  .race-meta .name.name-pending { color: var(--ink); }
  .race-meta .session.session-pending { color: var(--muted, #8a92a4); letter-spacing: 0.12em; }

  .nav { display: flex; align-items: center; gap: 2px; height: 100%; }
  .nav-item {
    height: 100%;
    padding: 0 22px;
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--ink-3);
    cursor: pointer;
    position: relative;
    border: none; background: none;
    transition: color .15s ease;
  }
  .nav-item svg { width: 14px; height: 14px; opacity: .7; }
  .nav-item:hover { color: var(--ink-2); }
  .nav-item.active { color: var(--ink); }
  .nav-item.active svg { opacity: 1; color: var(--brand); }
  .nav-item.active::after {
    content:''; position: absolute; left: 0; right: 0; bottom: -1px;
    height: 2px; background: var(--brand);
  }

  .top-right { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }

  /* ── Delay control ───────────────────────────────────────────────── */
  .delay-control {
    position: relative;
  }
  .delay-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px 0 11px;
    background: var(--bg-3);
    border: 1px solid var(--line-2);
    border-radius: 8px;
    color: var(--ink-3);
    cursor: pointer;
    transition: all .15s ease;
  }
  .delay-trigger:hover { color: var(--ink); border-color: var(--ink-4); }
  .delay-trigger svg { width: 14px; height: 14px; }
  .delay-trigger.on { color: var(--ink); border-color: rgba(255, 176, 32, 0.4); background: rgba(255, 176, 32, 0.08); }
  .delay-trigger.on svg { color: var(--amber); }
  .delay-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--ink-3);
  }
  .delay-trigger.on .delay-label { color: var(--amber); }
  .delay-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-2);
    letter-spacing: 0;
    min-width: 32px;
    text-align: right;
  }
  .delay-trigger.on .delay-value { color: var(--ink); }

  .delay-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: 10px;
    padding: 14px 14px 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    z-index: 50;
  }
  .delay-pop-head { margin-bottom: 12px; }
  .delay-pop-title {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--ink);
    line-height: 1;
  }
  .delay-pop-sub {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--ink-3);
    font-weight: 500;
  }
  .delay-presets {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 12px;
  }
  .delay-preset {
    background: var(--bg-3);
    border: 1px solid var(--line);
    color: var(--ink-3);
    font-size: 10.5px;
    font-weight: 600;
    padding: 6px 4px;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0;
    transition: all .12s ease;
  }
  .delay-preset:hover { color: var(--ink); border-color: var(--ink-4); }
  .delay-preset.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
  }
  .delay-slider-row {
    display: grid;
    grid-template-columns: 1fr 50px auto;
    align-items: center;
    gap: 8px;
  }
  .delay-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: var(--line);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
  }
  .delay-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--brand);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--brand);
  }
  .delay-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--brand);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--brand);
  }
  .delay-numeric {
    background: var(--bg-3);
    border: 1px solid var(--line-2);
    border-radius: 5px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 7px;
    width: 100%;
    text-align: right;
    outline: none;
    font-family: 'JetBrains Mono', monospace;
    -moz-appearance: textfield;
  }
  .delay-numeric::-webkit-outer-spin-button,
  .delay-numeric::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .delay-unit {
    font-size: 11px;
    color: var(--ink-3);
    font-weight: 500;
  }
  .icon-btn {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--bg-3);
    border: 1px solid var(--line-2);
    color: var(--ink-3);
    cursor: pointer;
    transition: all .15s ease;
  }
  .icon-btn:hover { background: var(--bg-3); color: var(--ink); border-color: var(--ink-4); }
  .icon-btn svg { width: 16px; height: 16px; }

  /* ---------- Sub bar ---------- */
  .subbar {
    height: 56px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 24px;
    gap: 24px;
  }
  .left-cluster { display: inline-flex; align-items: center; gap: 10px; }
  .subbar > .race-progress { justify-self: end; }
  .subbar > .weather-strip { justify-self: center; }
  .race-progress {
    display: inline-flex; align-items: center; gap: 12px;
    height: 38px;
    padding: 0 14px;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: 10px;
    width: fit-content;
  }
  .race-progress .label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
    color: var(--brand);
  }
  .race-progress .count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px; font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.02em;
  }
  .race-progress .count .total { color: var(--ink-3); }
  .race-progress .phase-pill {
    display: inline-flex; align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(216, 100, 255, 0.12);
    border: 1px solid rgba(216, 100, 255, 0.34);
    color: var(--purple);
    font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
  }
  .race-progress .status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px 3px 8px;
    border-radius: 999px;
    background: rgba(46, 230, 138, 0.1);
    border: 1px solid rgba(46, 230, 138, 0.25);
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em;
    color: var(--green);
  }
  .status-pill.finished {
    background: rgba(108, 114, 128, 0.12);
    border-color: rgba(108, 114, 128, 0.3);
    color: var(--ink-2);
  }
  .pulse-dot {
    width: 6px; height: 6px; border-radius: 50%; background: currentColor;
    box-shadow: 0 0 0 0 currentColor;
    animation: pulse 1.6s ease-out infinite;
  }
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 currentColor; }
    70% { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }

  .subtabs {
    display: inline-flex;
    gap: 6px;
  }
  .subtab {
    padding: 7px 22px;
    font-size: 13px; font-weight: 600;
    color: var(--ink-3);
    border: none; background: none; cursor: pointer;
    border-radius: 0;
    letter-spacing: 0.01em;
    transition: color .15s ease;
  }
  .subtab:hover { color: var(--ink-2); }
  .subtab.active {
    color: var(--ink);
    background: none;
    box-shadow: none;
  }
  .subtab.active::after {
    content: ''; display: block; height: 2px; margin: 5px -8px -8px;
    background: var(--brand); border-radius: 1px;
  }

  /* track-status badge sits in left-cluster now (kept rule for amber colors) */
  .badge {
    display: inline-flex; align-items: center; gap: 8px;
    height: 38px;
    padding: 0 13px 0 11px;
    border-radius: 10px;
    background: rgba(255, 176, 32, 0.1);
    border: 1px solid rgba(255, 176, 32, 0.3);
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
    color: var(--amber);
    white-space: nowrap;
  }

  /* Weather marquee scaffolding — invisible on desktop (flows as flex),
     becomes the animated ticker track on mobile. */
  .weather-track, .weather-track-group { display: contents; }
  .weather-track-dup { display: none; }

  /* ── Weather / track conditions strip (compact icons + values) ── */
  .weather-strip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-self: end;
  }
  .weather-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 7px;
  }
  .weather-item:hover { background: var(--bg-2); }
  .weather-icon {
    width: 16px; height: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 16px;
  }
  .weather-icon svg { width: 16px; height: 16px; display: block; }
  .weather-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0;
    white-space: nowrap;
  }
  .weather-value .unit {
    font-weight: 500;
    color: var(--ink-3);
    margin-left: 1px;
    font-size: 10.5px;
  }

  /* ---------- Table ---------- */
  .table-wrap {
    height: calc(100vh - 56px - 56px - var(--rt-playback-reserved-height));
    overflow-y: auto;
    overflow-x: auto;
    background: var(--bg);
  }
  .table-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
  .table-wrap::-webkit-scrollbar-track { background: transparent; }
  .table-wrap::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }

  table.timing {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
  }
  table.timing thead th {
    position: sticky; top: 0;
    background: var(--bg);
    z-index: 5;
    font-size: var(--rt-data-header-font-size);
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--ink-3);
    text-transform: uppercase;
    padding: 14px var(--rt-data-cell-padding-x);
    text-align: left;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
  }
  table.timing thead th.num { text-align: right; }
  table.timing thead th.center { text-align: center; }

  table.timing tbody tr {
    border-bottom: 1px solid rgba(28, 32, 39, 0.6);
    transition: background .12s ease;
  }
  table.timing tbody tr[data-driver-number] { cursor: pointer; }
  table.timing tbody tr:nth-child(even) { background: var(--row-alt); }
  table.timing tbody tr:nth-child(odd) { background: var(--row); }
  table.timing tbody tr:hover { background: var(--row-hover); }
  table.timing tbody tr.is-selected {
    background: rgba(160, 166, 176, 0.22);
    box-shadow: inset 3px 0 0 var(--ink-2), inset 0 0 0 1px rgba(160, 166, 176, 0.32);
  }
  table.timing tbody tr.is-selected:hover {
    background: rgba(160, 166, 176, 0.28);
  }
  table.timing tbody tr.is-out,
  table.timing tbody tr.is-ko {
    filter: grayscale(1) saturate(0.12);
    opacity: 0.46;
  }
  table.timing tbody tr.is-out:hover,
  table.timing tbody tr.is-ko:hover {
    opacity: 0.58;
  }
  table.timing tbody tr.is-out.is-selected,
  table.timing tbody tr.is-ko.is-selected {
    opacity: 0.62;
  }
  table.timing tbody tr.is-out.is-selected:hover,
  table.timing tbody tr.is-ko.is-selected:hover {
    opacity: 0.7;
  }
  table.timing tbody tr.is-out td,
  table.timing tbody tr.is-ko td {
    color: var(--ink-4);
  }
  table.timing tbody tr.is-out .driver-pill,
  table.timing tbody tr.is-ko .driver-pill,
  table.timing tbody tr.is-out .lap-chip,
  table.timing tbody tr.is-ko .lap-chip,
  table.timing tbody tr.is-out .sector-time,
  table.timing tbody tr.is-ko .sector-time,
  table.timing tbody tr.is-out .rank-chip,
  table.timing tbody tr.is-ko .rank-chip,
  table.timing tbody tr.is-out .tyre-cell,
  table.timing tbody tr.is-ko .tyre-cell,
  table.timing tbody tr.is-out .seg-cell,
  table.timing tbody tr.is-ko .seg-cell {
    box-shadow: none;
  }

  table.timing tbody td {
    padding: var(--rt-data-cell-padding-y) var(--rt-data-cell-padding-x);
    font-size: var(--rt-data-cell-font-size);
    color: var(--ink);
    white-space: nowrap;
    vertical-align: middle;
  }

  /* Laptime Series tab — driver columns of per-lap times with a frozen "Lap" column */
  table.laptime-series tbody td,
  table.laptime-series thead th,
  table.laptime-series thead td { text-align: center; font-family: 'JetBrains Mono', monospace; }
  table.laptime-series .lts-lap {
    position: sticky; left: 0;
    background: var(--bg-3);
    border-right: 1px solid var(--line);
    color: var(--ink-2);
    font-weight: 600;
    text-align: right;
    z-index: 4;
  }
  table.laptime-series thead th.lts-lap { z-index: 6; }
  /* Two-row frozen header: driver codes + the AVG (average) summary row, both pinned at top.
     The whole thead is sticky so both rows ride together (no per-row offset to compute). */
  table.laptime-series thead { position: sticky; top: 0; z-index: 5; }
  table.laptime-series thead th { position: static; background: var(--bg-3); }
  table.laptime-series .lts-avg-row td {
    background: var(--bg-3);
    border-bottom: 1px solid var(--line-2);
    color: var(--ink-2);
    font-size: var(--rt-data-cell-font-size);
    font-weight: 600;
    padding: 3px var(--rt-data-cell-padding-x) 7px;
  }
  table.laptime-series .lts-avg-label { color: var(--ink-3); font-weight: 700; }
  .laptime-series .lts-best { color: var(--green); }          /* driver's fastest lap */
  .laptime-series .lts-overall { color: var(--purple); font-weight: 700; } /* fastest overall */
  .laptime-series .lts-out { color: var(--ink-3); }           /* lap outside the ±MEDIAN_BAND window — dim the text only, so the row/column highlight stays full */

  /* Click a driver header to highlight its column, a lap number to highlight its row.
     Inset box-shadow tints over the cell so it works on both the frozen cells and the
     striped rows without disturbing the sticky background. */
  table.laptime-series thead th[data-driver],
  table.laptime-series td.lts-lap,
  table.laptime-series td.lts-time[data-lap] { cursor: pointer; }
  table.laptime-series th.lts-col-selected,
  table.laptime-series td.lts-col-selected,
  table.laptime-series tr.lts-row-selected > td {
    box-shadow: inset 0 0 0 999px rgba(120, 160, 230, 0.16);
  }
  table.laptime-series tr.lts-row-selected > td.lts-col-selected {
    box-shadow: inset 0 0 0 999px rgba(120, 160, 230, 0.30);
  }

  /* Position */
  td.pos {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--ink-3);
    width: 44px;
    text-align: center;
    font-size: var(--rt-data-position-font-size);
    letter-spacing: 0.02em;
  }
  tr.top-3 td.pos { color: var(--ink); }
  tr.pos-1 td.pos { color: var(--ink); }

  /* Rank delta chip */
  .rank-chip {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 3px;
    min-width: 38px; height: var(--rt-data-status-height);
    padding: 0 8px;
    border-radius: 999px;
    background: var(--bg-3);
    border: 1px solid var(--line-2);
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--rt-data-chip-small-font-size); font-weight: 600;
    color: var(--ink-3);
  }
  .rank-chip.up { color: var(--green); border-color: rgba(46, 230, 138, 0.25); background: rgba(46, 230, 138, 0.06); }
  .rank-chip.down { color: var(--brand); border-color: rgba(255, 30, 30, 0.25); background: rgba(255, 30, 30, 0.06); }
  .rank-chip svg { width: 9px; height: 9px; margin-right: 2px; }

  /* Driver status */
  td.status-cell {
    min-width: 70px;
  }
  .driver-status-empty {
    display: inline-block;
    width: 42px;
    height: var(--rt-data-status-height);
  }
  .driver-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: var(--rt-data-status-height);
    padding: 0 8px;
    border-radius: 999px;
    background: var(--bg-3);
    border: 1px solid var(--line-2);
    color: var(--ink-3);
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--rt-data-status-font-size);
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
  }
  .driver-status.status-pit {
    color: var(--yellow);
    background: rgba(255, 214, 10, 0.07);
    border-color: rgba(255, 214, 10, 0.22);
  }
  .driver-status.status-outlap {
    color: #27f4d2;
    background: rgba(39, 244, 210, 0.08);
    border-color: rgba(39, 244, 210, 0.24);
  }
  .driver-status.status-finish {
    color: var(--green);
    background: rgba(46, 230, 138, 0.08);
    border-color: rgba(46, 230, 138, 0.22);
  }
  .driver-status.status-out,
  .driver-status.status-dns {
    color: var(--brand);
    background: rgba(255, 30, 30, 0.08);
    border-color: rgba(255, 30, 30, 0.22);
  }
  .driver-status.status-ko {
    color: var(--purple);
    background: rgba(216, 100, 255, 0.1);
    border-color: rgba(216, 100, 255, 0.24);
  }

  /* Driver pill — team-color outer border, number cell + code cell */
  td.driver-cell { padding-left: 0; }
  .driver-pill {
    display: inline-flex; align-items: stretch;
    height: var(--rt-data-pill-height);
    border: 2px solid var(--team, var(--ink-3));
    border-radius: 6px;
    overflow: hidden;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: var(--rt-data-pill-font-size);
    letter-spacing: 0.02em;
    line-height: 1;
  }
  .driver-pill .driver-num {
    background: var(--team);
    color: var(--num-text, #000);
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px;
    flex: 0 0 30px;
    padding: 0;
  }
  .driver-pill .driver-code {
    background: var(--code-bg, #0a0c10);
    color: var(--code-text, var(--team));
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 9px;
  }

  /* Team color rails */
  .rail-mercedes { background: var(--t-mercedes); }
  .rail-redbull  { background: var(--t-redbull); }
  .rail-ferrari  { background: var(--t-ferrari); }
  .rail-mclaren  { background: var(--t-mclaren); }
  .rail-alpine   { background: var(--t-alpine); }
  .rail-rb       { background: var(--t-rb); }
  .rail-haas     { background: var(--t-haas); }
  .rail-williams { background: var(--t-williams); }
  .rail-audi     { background: var(--t-audi); }
  .rail-aston    { background: var(--t-aston); }
  .rail-cadillac { background: var(--t-cadillac); }

  /* Team text */
  td.team {
    font-size: var(--rt-data-cell-font-size);
    color: var(--ink-2);
    font-weight: 500;
  }

  /* Timing chip (laptime pill) */
  .lap-chip {
    display: inline-flex; align-items: center; justify-content: center;
    height: var(--rt-data-chip-height); padding: 0 var(--rt-data-cell-padding-x);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--rt-data-chip-font-size); font-weight: 600;
    color: var(--ink);
    letter-spacing: 0.02em;
  }
  .lap-chip.green {
    color: var(--green);
    background: rgba(46, 230, 138, 0.08);
    border-color: rgba(46, 230, 138, 0.18);
  }
  .lap-chip.purple {
    color: var(--purple);
    background: rgba(216, 100, 255, 0.1);
    border-color: rgba(216, 100, 255, 0.22);
  }
  .lap-chip.yellow {
    color: var(--yellow);
    background: rgba(255, 214, 10, 0.07);
    border-color: rgba(255, 214, 10, 0.16);
  }
  .lap-chip.dash {
    color: var(--ink-4);
    font-weight: 500;
  }

  /* Delta cell with rank prefix */
  .delta-cell { display: inline-flex; align-items: center; gap: 10px; }
  .delta-rank {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--rt-data-chip-small-font-size);
    color: var(--ink-3);
    min-width: 18px;
    text-align: right;
    font-weight: 500;
  }
  .delta-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--rt-data-chip-font-size);
    font-weight: 600;
    color: var(--ink);
  }
  .delta-value.fastest { color: var(--purple); }
  .delta-value.faded { color: var(--ink-3); }

  /* Gap / Interval / Diff */
  td.gap, td.interval, td.relative-gap {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--rt-data-cell-font-size);
    color: var(--ink);
    font-weight: 500;
  }
  td.gap.lap-down, td.interval.lap-down { color: var(--ink-3); font-weight: 500; }
  td.gap.dash, td.interval.dash, td.relative-gap.dash { color: var(--ink-4); }

  /* Sectors */
  .sector-time {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: var(--rt-data-sector-min-width); height: var(--rt-data-chip-height);
    padding: 0 10px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--rt-data-chip-font-size); font-weight: 600;
    background: rgba(255, 255, 255, 0.025);
    color: var(--ink);
    border: 1px solid transparent;
  }
  .sector-time.green { color: var(--green); background: rgba(46, 230, 138, 0.08); border-color: rgba(46, 230, 138, 0.18); }
  .sector-time.purple { color: var(--purple); background: rgba(216, 100, 255, 0.1); border-color: rgba(216, 100, 255, 0.22); }
  .sector-time.yellow { color: var(--yellow); background: rgba(255, 214, 10, 0.07); border-color: rgba(255, 214, 10, 0.16); }
  .sector-time.stale { opacity: 0.3; }
  .sector-time.empty { color: var(--ink-4); background: transparent; border-color: var(--line); font-weight: 500; }

  /* Tyre chip — circle ring + center letter, with diagonal spikes when worn */
  .tyre-cell {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--rt-data-cell-font-size);
    font-weight: 600;
  }
  /* Fixed-width (monospace) slot so 1- and 2-digit ages don't shift the tyre glyph. */
  .tyre-laps { color: var(--ink); width: 2ch; text-align: right; flex-shrink: 0; }
  /* Actual tyre age — small subscript "prime"; same fixed-width slot keeps every tyre
     glyph vertically aligned across rows regardless of digit count. */
  .tyre-start {
    color: var(--ink-2); font-weight: 500;
    align-self: flex-end;
    font-size: 0.72em; line-height: 1;
    width: 2ch; text-align: left; flex-shrink: 0;
    margin-left: -5px;
  }

  /* "All Tyres" column — every stint's tyre in a single cell */
  .all-tyres { display: inline-flex; align-items: center; gap: 14px; }

  .tyre-glyph {
    width: var(--rt-data-tyre-size); height: var(--rt-data-tyre-size);
    position: relative;
    display: inline-flex;
  }
  .tyre-glyph svg { width: 100%; height: 100%; display: block; overflow: visible; }

  /* Segments mini bars */
  .seg-bars { display: inline-flex; gap: 3px; vertical-align: middle; }
  .seg-bars .bar {
    width: var(--rt-data-mini-bar-width); height: var(--rt-data-mini-bar-height); border-radius: 2px;
    background: var(--line);
  }
  .seg-bars .bar.y { background: var(--yellow); }
  .seg-bars .bar.g { background: var(--green); }
  .seg-bars .bar.p { background: var(--purple); }
  .seg-bars .bar.pit { background: var(--brand); }
  .seg-cell { display: inline-flex; align-items: center; gap: 12px; }
  .seg-cell.segments-stale .seg-bars { opacity: 0.3; }
  .delta-val .stale { color: var(--ink-3); opacity: 0.58; }

  /* Speed col */
  td.spd {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--rt-data-chip-small-font-size);
    color: var(--ink-3);
    font-weight: 500;
    letter-spacing: 0.04em;
  }
  td.spd.stale { opacity: 0.3; }

  /* Pits */
  td.pits {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--rt-data-cell-font-size);
    color: var(--ink-2);
    font-weight: 600;
    text-align: center;
  }
  td.pits.zero { color: var(--ink-4); font-weight: 500; }
  td.pit-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--rt-data-chip-font-size);
    color: var(--ink-2);
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  td.pit-time.empty {
    color: var(--ink-4);
    font-weight: 500;
  }

  /* Driver flag header for segments tab */
  .seg-header-driver {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(216, 100, 255, 0.12);
    color: var(--purple);
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--rt-data-chip-small-font-size); font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: none;
  }
  .seg-header-driver .dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--purple);
  }

  /* DNF tag */
  .dnf-tag {
    display: inline-flex; align-items: center;
    padding: 2px 7px; border-radius: 4px;
    background: rgba(255, 30, 30, 0.12);
    color: var(--brand);
    font-size: var(--rt-data-track-label-font-size); font-weight: 700; letter-spacing: 0.12em;
    font-family: 'Inter', sans-serif;
    margin-left: 8px;
  }

  /* ---------- Playback bar ---------- */
  .playback {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    height: 60px;
    background: var(--bg-2);
    border-top: 1px solid var(--line);
    display: flex; align-items: center; gap: 18px;
    padding: 0 24px;
  }
  .playback-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .play-btn {
    height: 36px;
    border-radius: 10px;
    background: var(--bg-3);
    border: 1px solid var(--line-2);
    color: var(--ink);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 2px;
    transition: all .15s ease;
    padding: 0 8px;
    min-width: 36px;
  }
  .play-btn:hover { background: var(--bg-2); border-color: var(--ink-4); }
  .play-btn.primary {
    width: 36px;
    padding: 0;
  }
  .play-btn.primary:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
  .play-btn.primary svg { width: 12px; height: 12px; }
  .play-btn.skip {
    height: 36px;
    width: auto;
    padding: 0 12px;
    gap: 6px;
    background: transparent;
    border-color: transparent;
    color: var(--ink-3);
    border-radius: 10px;
  }
  .play-btn.skip:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink);
    border-color: transparent;
  }
  .play-btn.skip:active {
    transform: scale(0.96);
  }
  .play-btn.skip svg { width: 16px; height: 16px; flex: 0 0 16px; }
  .play-btn.skip .skip-amount {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0;
    color: inherit;
    line-height: 1;
  }

  .scrubber {
    flex: 1;
    height: 6px;
    background: var(--line);
    border-radius: 3px;
    position: relative;
    cursor: pointer;
  }
  /* seek-row flattens on desktop so controls · scrubber · time stay one row */
  .seek-row { display: contents; }
  .scrub-time { display: none; }
  .scrubber .filled {
    position: absolute; top: 0; left: 0; bottom: 0;
    background: var(--brand);
    border-radius: 3px;
  }
  .scrubber .thumb {
    position: absolute; top: 50%;
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 3px var(--brand), 0 2px 8px rgba(0,0,0,0.4);
  }
  .time-display {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--ink-2);
    font-weight: 500;
    letter-spacing: 0.02em;
    min-width: 130px;
    text-align: right;
  }
  .time-display .total { color: var(--ink-3); }

  /* ---------- Stub views ---------- */
  .stub {
    height: calc(100vh - 56px);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    gap: 14px;
    color: var(--ink-3);
  }

  /* ---------- Session empty state (no live session) ---------- */
  .session-empty-view {
    min-height: calc(100vh - 56px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px 72px;
    background:
      radial-gradient(circle at 50% 36%, rgba(255, 30, 30, 0.05), transparent 58%),
      var(--bg);
  }
  .se-panel {
    width: min(520px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .se-badge {
    position: relative;
    width: 84px; height: 84px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    color: var(--ink-2);
    margin-bottom: 26px;
  }
  .se-badge-ring {
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1px solid rgba(255, 30, 30, 0.45);
    animation: se-ring 2.4s ease-out infinite;
  }
  @keyframes se-ring {
    0% { transform: scale(1); opacity: 0.7; }
    70% { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
  }
  .se-flag { width: 38px; height: 38px; display: block; }
  .se-title {
    margin: 0;
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--ink);
  }
  .se-text {
    margin: 12px 0 0;
    max-width: 42ch;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-3);
  }
  .se-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    color: var(--ink-3);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .se-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
  }
  .se-status-online { color: var(--green); border-color: rgba(46, 230, 138, 0.32); }
  .se-status-connecting { color: var(--amber); border-color: rgba(255, 176, 32, 0.32); }
  .se-status-offline { color: var(--brand); border-color: rgba(255, 30, 30, 0.32); }
  .se-status-online .se-dot,
  .se-status-connecting .se-dot {
    animation: pulse 1.6s ease-out infinite;
  }
/* File: public/assets/css/layout.css | Generated: 2026-06-05 16:27 UTC+03:30 */