/* File: responsive.css | Generated: 2026-05-31 02:57 UTC+03:30 */
/* responsive.css — part of Live GP styles (split from styles.css) */

  /* ════════════════════════════════════════════════════════════════════
     MOBILE — top two bars redesigned for narrow viewports (≤ 720px)
     ════════════════════════════════════════════════════════════════════ */
  @media (max-width: 720px) {

    /* ── Top bar → flex, wraps the nav onto its own full-width line ── */
    .topbar {
      height: auto;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      row-gap: 10px;
      column-gap: 12px;
      padding: 10px 14px;
    }
    .brand-block {
      gap: 12px;
      flex: 1 1 auto;
      min-width: 0;
    }
    .logo { font-size: 15px; }
    .logo .logo-mark { width: 16px; height: 16px; }
    .race-meta {
      padding-left: 12px;
      margin-left: 2px;
      border-left: 1px solid var(--line);
      min-width: 0;
    }
    .race-meta .name { font-size: 11.5px; letter-spacing: 0.04em; }
    .session-row { margin-top: 4px; gap: 6px; }
    .race-meta .session { font-size: 9px; }
    .status-badge { font-size: 7.5px; padding: 2px 6px; }

    /* Right controls stay top-right, icon-forward */
    .top-right { order: 2; margin-left: auto; gap: 6px; }
    .delay-trigger { padding: 0 9px; height: 32px; }
    .delay-label { display: none; }            /* icon + value only */
    .delay-value { font-size: 11px; min-width: 0; }
    .icon-btn { width: 32px; height: 32px; }

    /* Nav becomes a full-width segmented pill on its own row */
    .nav {
      order: 3;
      flex: 1 1 100%;
      width: 100%;
      height: auto;
      gap: 0;
      background: var(--bg-3);
      border: 1px solid var(--line-2);
      border-radius: 10px;
      padding: 3px;
    }
    .nav-item {
      flex: 1 1 0;
      height: 36px;
      padding: 0;
      justify-content: center;
      font-size: 11px;
      letter-spacing: 0.12em;
      border-radius: 8px;
      transition: background .18s ease, color .18s ease;
    }
    .nav-item.active { color: #fff; background: var(--brand); }
    .nav-item.active::after { display: none; }   /* drop underline; pill fill instead */

    /* ── Sub bar → status row on top (SAFETY CAR left, lap right), weather ticker below ── */
    .subbar {
      height: auto;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
    }
    .subbar > div:empty { display: none; }       /* kill the empty spacer column */
    /* SAFETY CAR sticks left, lap counter pushed to the right */
    .left-cluster {
      flex: 0 0 auto;
      order: 1;
    }
    .subbar > .race-progress {
      order: 2;
      margin-left: auto;
      justify-self: auto;
    }
    .subbar > .weather-strip { order: 3; }
    .race-progress { height: 34px; padding: 0 11px; gap: 8px; }
    .race-progress .count { font-size: 13px; }
    .badge { height: 34px; padding: 0 11px 0 9px; font-size: 9.5px; }

    /* Weather: single-line news-ticker marquee, scrolls right → left */
    .weather-strip {
      flex: 1 1 100%;
      min-width: 0;
      width: 100%;
      display: block;
      overflow: hidden;
      white-space: nowrap;
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
              mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    }
    .weather-track {
      display: inline-flex;
      animation: weather-marquee 26s linear infinite;
    }
    .weather-track-group {
      display: inline-flex;
      gap: 8px;
      padding-left: 8px;
    }
    .weather-track-dup { display: inline-flex; }
    @keyframes weather-marquee {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    .weather-item {
      flex: 0 0 auto;
      gap: 5px;
      padding: 6px 9px;
      background: var(--bg-2);
      border: 1px solid var(--line);
      border-radius: 8px;
    }
  }

  /* Extra-tight phones (≤ 400px): shrink brand to the mark + race title */
  @media (max-width: 400px) {
    .logo { font-size: 0; gap: 0; }              /* hide wordmark, keep mark */
    .logo .logo-mark { width: 20px; height: 20px; }
    .nav-item { font-size: 10px; letter-spacing: 0.08em; }
  }


  /* Section label inside a general-settings card */
  .gen-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--ink-3);
    margin-bottom: 12px;
  }


  /* ── Mobile: playback bar becomes a two-row, touch-friendly control ── */
  @media (max-width: 720px) {
    .playback {
      height: auto;
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
      padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
      background: var(--bg-2);
      border-top: 1px solid var(--line);
    }

    /* Row 1 — elapsed · scrubber · total all on one line */
    .seek-row {
      order: 1;
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      margin: 2px 0 2px;
    }
    .scrub-time {
      display: inline-block;
      flex: 0 0 auto;
      font-size: 11px;
      color: var(--ink-3);
      letter-spacing: 0.02em;
    }
    .scrub-elapsed { color: var(--ink-2); }
    .scrubber {
      order: 0;
      flex: 1 1 auto;
      width: auto;
      height: 6px;
      border-radius: 3px;
      background: var(--line-2);
      margin: 0;
    }
    .scrubber .filled { background: var(--brand); border-radius: 3px; }
    .scrubber .thumb {
      width: 14px; height: 14px;
      background: #fff;
      box-shadow: 0 0 0 3px var(--brand);
    }
    /* Old single-line time readout hidden — times now flank the scrubber */
    .time-display { display: none; }

    /* Row 2 — compact centered transport controls + inline time */
    .playback-controls {
      order: 2;
      width: 100%;
      justify-content: center;
      align-items: center;
      gap: 12px;
    }
    .play-btn.skip {
      height: 38px;
      padding: 0 13px;
      gap: 6px;
      border-radius: 10px;
      background: var(--bg-3);
      border: 1px solid var(--line-2);
      color: var(--ink-2);
    }
    .play-btn.skip .ic { width: 16px; height: 16px; }
    .play-btn.skip .skip-amount { font-size: 12px; font-weight: 700; }
    .play-btn.primary {
      width: 44px; height: 44px;
      border-radius: 50%;
      background: var(--brand);
      border: none;
      color: #fff;
      box-shadow: 0 2px 10px rgba(255, 30, 30, 0.3);
    }
    .play-btn.primary .ic { width: 16px; height: 16px; background-color: #fff; }
  }
/* File: responsive.css | Generated: 2026-05-31 02:57 UTC+03:30 */