/* ===== MOBILE LAYOUT IMPROVEMENTS ===== */

/* Fix backdrop-filter on <nav> — it creates a containing block for position:fixed
   descendants, trapping .mobile-menu inside the ~60px nav height.
   Move the blur to .nav-inner instead so fixed positioning escapes correctly. */
nav { backdrop-filter: none; }
.nav-inner { backdrop-filter: blur(12px); }

/* Date column — override muted grey so date reads clearly in all leaderboard tables */
.lb-date { color: var(--text); }

/* By-track leaderboard: halve the track column min-width (main.css sets 280px) */
.lb-track-cell { min-width: 140px; }

/* Cars-at-track and drivers lap table: match the by-track column widths */
#cars-table .lap-track:not(.lb-rank) { min-width: 140px; }
#drivers-table .lap-track:not(.lb-rank) { min-width: 140px; }
#drivers-table .lap-car { min-width: 140px; }

/* ===== HAMBURGER BUTTON ===== */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: border-color 0.2s;
}

.nav-hamburger:hover { border-color: var(--muted); }

.nav-hamburger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--text);
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
}

.nav-hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ===== MOBILE BREAKPOINT ===== */
@media (max-width: 720px) {
  .nav-inner { padding: 14px 16px; }
  nav ul { display: none; }
  .nav-right { display: none; }
  .nav-hamburger { display: flex; }

  .hero, .setups-section, .ai-section, .featured-section,
  .detail-section, .cart-section, .admin-section { padding: 48px 16px; }
  .setups-grid { grid-template-columns: 1fr; }
  .ai-inputs { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; text-align: center; padding: 28px 16px; gap: 10px; }
  .hero-stats { gap: 24px; }
  /* Hero CTAs stack full-width instead of running off the right edge */
  .hero-actions { gap: 10px; }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost { flex: 1 1 100%; text-align: center; }
  .admin-table { font-size: 11px; }

  /* Admin pages are the one exception to the no-horizontal-scroll rule:
     the wide admin tables let the whole page scroll sideways */
  html:has(.admin-layout), body:has(.admin-layout) { overflow-x: auto; }

  /* Admin sidebar: a 160px column plus the 40px gap swallowed half a phone
     viewport before the content began. Lay it out as a horizontally
     scrollable strip above the content instead, same idiom as .lb-view-tabs. */
  .admin-layout {
    flex-direction: column;
    gap: 16px;
    /* main.css sets flex-start, which in a column container would shrink both
       children to fit-content width instead of filling the viewport */
    align-items: stretch;
  }
  .admin-sidebar {
    width: 100%;
    position: static;
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .admin-sidebar::-webkit-scrollbar { display: none; }
  /* The "ADMIN" heading is a column label — meaningless (and costly) in a row */
  .admin-sidebar-label { display: none; }
  .admin-nav-btn {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 11px;
    padding: 7px 12px;
    border: 1px solid var(--border);
  }
  .page-title { font-size: 52px; }
  .sim-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== MOBILE MENU ===== */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  /* Keep the closed drawer out of the tab order; the delay lets the
     slide-out animation finish before it is hidden */
  visibility: hidden;
  transition: visibility 0s 0.3s;
}

.mobile-menu.is-open {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s;
}

.mobile-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 8, 0.7);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-menu.is-open .mobile-menu-backdrop {
  opacity: 1;
}

.mobile-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}

.mobile-menu.is-open .mobile-menu-panel {
  transform: translateX(0);
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.mobile-menu-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.mobile-menu-close:hover { border-color: var(--text); color: var(--text); }

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  flex: 1;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s, background 0.2s;
}

.mobile-nav-link:hover { color: var(--text); background: var(--surface2); }

.mobile-nav-link.nav-active {
  color: var(--accent);
  border-left: 3px solid var(--accent);
  padding-left: 21px;
}

/* Cart badge inside nav link */
.mobile-nav-link--cart .cart-badge {
  position: static;
  display: inline-flex;
  margin-left: 4px;
}

/* Drawer groups: a parent row that opens its pages indented beneath it. */
.mobile-nav-group > summary {
  list-style: none;
  cursor: pointer;
  justify-content: space-between;
}
.mobile-nav-group > summary::-webkit-details-marker { display: none; }
.mobile-nav-chevron {
  width: 12px;
  height: 8px;
  flex: none;
  transition: transform 0.2s;
}
.mobile-nav-group[open] > summary .mobile-nav-chevron { transform: rotate(180deg); }
.mobile-nav-group[open] > summary { color: var(--text); }
.mobile-nav-group > summary.nav-active-parent { color: var(--accent); }
.mobile-nav-sub {
  padding: 11px 24px 11px 44px;
  font-size: 12px;
  letter-spacing: 1.5px;
  background: rgba(240, 239, 232, 0.03);
}
.mobile-nav-sub.nav-active { padding-left: 41px; }
.mobile-nav-link--cta { color: var(--accent); font-weight: 600; }

/* Sign In link — accent colour so it pops */
.mobile-nav-link--signin { color: var(--accent); }
.mobile-nav-link--signin:hover { color: var(--text); background: var(--surface2); }

.mobile-menu-footer {
  padding: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

.mobile-nav-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.mobile-nav-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--text);
  line-height: 1;
  margin-bottom: 4px;
}

.mobile-nav-profile-link {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}

.mobile-nav-profile-link:hover { color: var(--text); }

.mobile-nav-signout-form { margin: 0; }

.mobile-nav-signout {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 11px 20px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}

.mobile-nav-signout:hover { border-color: var(--accent2); color: var(--accent2); }

/* Prevent body scroll when mobile menu is open */
body.menu-open { overflow: hidden; }

/* ===== LEADERBOARD MOBILE ===== */
@media (max-width: 720px) {
  /* Never scroll the whole page sideways — wide tables scroll inside .lb-card */
  html, body { overflow-x: hidden; }

  /* Telemetry client card: let it wrap — icon + downloads on top,
     token/sign-in panel drops to its own full-width row below */
  .telemetry-card { flex-wrap: wrap; }
  .lb-footer-card { width: 100%; }
  .lb-header-filters { width: 100%; }
  .telemetry-card-token {
    flex: 1 1 100%;
    max-width: none;
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--border);
    padding-top: 14px;
  }

  /* View tabs: horizontally scrollable so long labels don't wrap */
  .lb-view-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .lb-view-tabs::-webkit-scrollbar { display: none; }
  .lb-view-tab { white-space: nowrap; flex-shrink: 0; }

  /* Filter: full-width search input */
  .lb-filters { flex-wrap: wrap; gap: 8px; }
  .lb-filter-input { flex: 1 1 100%; width: 100%; }

  /* Show 7 columns (overrides main.css nth-child(n+7) hide rule).
     Segment times are excluded: on the per-car tracks table column 7 is S1,
     and without the :not() this rule would re-show the very sector cells
     main.css hides — it loads later at equal specificity, so it would win. */
  .lap-table th:nth-child(7):not(.lap-sector),
  .lap-table td:nth-child(7):not(.lap-sector) { display: table-cell; }

  /* Table: cols 1-7 visible; hide 8-10 and 12 for main leaderboard */
  #lb-table th:nth-child(8),
  #lb-table td:nth-child(8),
  #lb-table th:nth-child(9),
  #lb-table td:nth-child(9),
  #lb-table th:nth-child(10),
  #lb-table td:nth-child(10),
  #lb-table th:nth-child(12),
  #lb-table td:nth-child(12) { display: none; }

  /* …but keep the count column visible: Cars on the track (grouped by
     track) / Tracks for the car (grouped by car) — on the main leaderboard
     and the per-track/per-car drill-down tables alike. Class-based so it
     works whatever position the optional Date/Sim columns leave it in.
     The .lap-table selector overrides main.css's nth-child(n+7) hide by
     source order; the #lb-table one outranks this file's nth-child hides. */
  .lap-table th.lb-count-col,
  .lap-table td.lb-count-col,
  #lb-table th.lb-count-col,
  #lb-table td.lb-count-col { display: table-cell; }

  /* Same for the Drivers count beside it on the All Combos table: the pair
     reads as one fact — this many laps, by this many drivers — so hiding
     half of it on a phone leaves a bare number. Class-based for the same
     reason, and placed after the nth-child hides above, which it ties with
     on specificity and beats on source order. */
  .lap-table th.lb-drivers-col,
  .lap-table td.lb-drivers-col,
  #lb-table th.lb-drivers-col,
  #lb-table td.lb-drivers-col { display: table-cell; }

  /* Track and car columns — fixed readable width on mobile */
  .lb-track-cell { min-width: 170px; }
  #lb-table .lap-car { min-width: 170px; }
  #cars-table .lap-track:not(.lb-rank) { min-width: 170px; }
  #cars-table .lap-car { min-width: 170px; }
  /* #drivers-table has no track/car columns — the page is already scoped to
     one car & track, both shown in its header. */

  /* Driver lap-history table: few, narrow columns — show them all
     (overrides main.css nth-child(n+7) hide: Date + Telemetry button)
     and let it scroll inside .lb-card if it overflows */
  #driver-laps-table th,
  #driver-laps-table td { display: table-cell; white-space: nowrap; }

  /* Allow table to scroll horizontally if it still overflows */
  .lb-card { overflow-x: auto; }

  /* Lap Times pages (/laps, /laps/detail): tables live in .profile-edit-card,
     not .lb-card — give them the same scroll container, show every column
     (overrides main.css nth-child(n+7) hide rule), and keep a readable
     min-width so the table scrolls instead of squashing */
  .profile-edit-card:has(.lap-table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .profile-edit-card .lap-table th:nth-child(n+1),
  .profile-edit-card .lap-table td:nth-child(n+1) {
    display: table-cell;
    white-space: nowrap;
  }

  /* Smaller page title on leaderboard */
  .lb-section .page-title { font-size: 42px; }

  /* ===== GENERATED ADVICE OUTPUT ===== */
  /* The damper table is five columns of numbers — intrinsically wider than a
     phone screen. Give it its own scroll box (same approach as .lb-card
     above) so it stays reachable rather than being clipped by the
     html/body overflow-x:hidden rule at the top of this block. */
  .ai-response-text .damper-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ai-response-text .damper-table th,
  .ai-response-text .damper-table td { white-space: nowrap; }

  /* AI/user-supplied text can carry long unbroken tokens; break them rather
     than letting one widen the whole column. */
  .ai-response-text { overflow-wrap: break-word; }
}

/* ===== NAV: FOLD THE LINKS AWAY BEFORE THEY CRUSH THE ROW ===== */

/* Wide desktop: the row has room for every label on one line — 1290px of
   content against the 1304px inside .nav-inner's 1400px cap, once the gap
   comes down. main.css lets the <ul> shrink as a flex item, so without this
   each two-word label broke in half ("SETUP / ADVISOR") even at 1600px and
   the nav stood 78px tall. Held above 1400px only: narrower than that the
   full signed-in row genuinely does not fit, and forcing one line there would
   push the right-hand cluster off the edge instead of wrapping it. */
@media (min-width: 1401px) {
  /* wrap, not nowrap: if a wider font fallback ever pushes the row past the
     cap, the last link drops to a second line rather than off the edge */
  nav ul { flex-wrap: wrap; gap: 24px; }
  nav ul li { flex: 0 0 auto; }
  nav ul a { white-space: nowrap; }
}

/* Below the cap the full row stops fitting: the signed-in set of links plus
   the lap counter, YouTube, avatar and Sign Out needs ~1290px of content, and
   what it did instead of overflowing was shrink — breaking "SETUP ADVISOR"
   across two lines and standing the nav 78px tall, with the right-hand cluster
   crowding the last link. A phone held in landscape (usually 850–930px wide)
   never reached the 720px mobile breakpoint, so that is the nav it got. Fold
   the links into the drawer instead; it already carries every one of them, and
   the hamburger is already in the markup. The right-hand cluster stays visible
   down to 720px, where the block above hides it. */
@media (max-width: 1200px) {
  nav ul { display: none; }
  .nav-hamburger { display: flex; }
  .nav-inner { gap: 12px; }
}

/* ===== DECORATIONS THAT HANG PAST THE RIGHT EDGE =====
   These three sit at right: -20px/-40px, which on desktop is clipped by the
   body's overflow-x and looks intentional. On a phone or tablet it is not
   clipped in time: mobile Chrome grows the *layout viewport* to the widest
   content before it paints, so a 40px watermark overhang made /advisor lay
   out at 955px inside a 915px screen — the whole page zoomed out to fit and
   the nav bar stopped short of the right edge. Pull them back inside. */
@media (max-width: 1200px) {
  .hero::after { display: none; }
  .hero-bg-text { right: 0; }
  .ai-section::before { right: 0; }
}

/* ===== LANDSCAPE PHONES =====
   A phone on its side is wide but very short — ~350–430px of viewport height,
   less once the browser chrome is counted. The width-driven breakpoints above
   don't see that at all: at 900x400 the desktop layout applies, so a hero sized
   in vw units and 60–120px section padding push everything below the fold and
   the page reads as one giant headline. Everything here is vertical
   compaction, keyed off the short viewport rather than the width. The
   max-width guard keeps real desktop windows out. */
@media (max-width: 1180px) and (max-height: 560px) and (orientation: landscape) {
  .nav-inner { padding: 8px 16px; }
  .logo img { height: 22px; }
  /* Anchor jumps clear a ~44px nav here, not the desktop 90px */
  [id] { scroll-margin-top: 56px; }

  /* Section padding: the vertical half is what costs a screen, the
     horizontal half stays generous — there is width to spare */
  .hero, .setups-section, .ai-section, .featured-section,
  .detail-section, .cart-section, .admin-section,
  .profile-section, .lb-section { padding: 28px 24px; }

  /* Headlines: clamp()'s vw-based middle term is sized for portrait, where
     width is the scarce axis. In landscape it is height, so cap them. */
  .hero h1 { font-size: clamp(38px, 5.5vw, 56px); margin-bottom: 20px; }
  .hero-tag { margin-bottom: 16px; }
  .hero-sub { margin-bottom: 24px; }
  .hero-stats { margin-top: 28px; padding-top: 22px; gap: 28px; }
  .hero-bg-text { font-size: 140px; }
  .page-title, .lb-section .page-title { font-size: 40px; margin-bottom: 24px; }
  .advisor-title, .ai-inner h2 { font-size: 40px; }
  .advisor-desc { margin-bottom: 20px; }
  .ai-section::before { font-size: 200px; top: -30px; }
  .home-hero h1 { font-size: clamp(38px, 5.5vw, 60px); margin: 10px 0 16px; }
  .home-hero-sub { margin-bottom: 20px; }
  .home-feature-body h2 { font-size: clamp(30px, 3.4vw, 40px); }
  .lb-header-row { margin-bottom: 20px; }
  .lb-track-image { height: 80px; }

  /* Auth cards: min-height 80vh plus 48px of card padding put the submit
     button two screens down on a page that is one form */
  .login-section { min-height: 0; padding: 20px 24px; }
  .login-card { padding: 24px 28px; }
  .login-brand { margin-bottom: 18px; }
  .login-brand .logo img { height: 26px; }
  .login-sub { margin-top: 8px; }

  /* The drawer is the only nav here, and it has to fit in ~400px */
  .mobile-menu-header { padding: 10px 20px; }
  .mobile-nav-link { padding: 9px 24px; }
  .mobile-menu-footer { padding: 12px 20px; gap: 8px; }
  .mobile-nav-user { padding: 8px 0; }
}

/* Landscape phones wide enough for two columns: put the width back to work.
   These layouts collapse to a single column at 960–1024px on the assumption
   that a narrow viewport is a tall one — true in portrait, wrong here, where
   stacking is what buries the form under the headline. From 640px up the two
   columns are still ~270px and ~380px, which both sides carry. */
@media (min-width: 640px) and (max-width: 1180px) and (max-height: 560px) and (orientation: landscape) {
  .advisor-layout { grid-template-columns: 1fr 1.4fr; gap: 28px; }
  /* Left column stays static — sticky needs headroom this viewport lacks */
  .advisor-left { position: static; }
  /* Even columns: the motto rows ("EVERY CORNER.") need the width or they
     wrap to four lines, which is what the height here cannot afford */
  .home-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
  .home-hero h1 { font-size: clamp(32px, 4.4vw, 44px); }
  /* Four sim tiles across a half-width column clip their own names — the
     tile is a fixed 16/9 box, so a wrapped name is a cut-off name. Two fit
     the narrow landscape phones; the wider ones take a third below. */
  .sim-grid { grid-template-columns: repeat(2, 1fr); }
  .home-feature-inner,
  .home-telemetry-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
  .home-feature--reverse .home-feature-art  { order: 2; }
  .home-feature--reverse .home-feature-body { order: 1; }
}

/* Wider landscape phones have room for a third sim tile per row */
@media (min-width: 860px) and (max-width: 1180px) and (max-height: 560px) and (orientation: landscape) {
  .sim-grid { grid-template-columns: repeat(3, 1fr); }
}