@media (max-width: 1099px) {
  [data-screen-label], .hl-root { min-width: 0 !important; }
  .hl-stack-two, .hl-bound-grid[style*="repeat(2,"], .explorer-two-col, .zone.two-up, .race-list, .kv, .fact {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .legal-layout, .meta-rows, .legal-nav ol, .rules, .steps > li, .sources > li {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .hl-stack-two > * { min-width: 0 !important; }
  .hl-stack-two [style*="position: sticky"] { position: static !important; }
  .hl-masthead, .masthead { flex-wrap: wrap !important; }
  .hl-nav, .masthead nav { flex-wrap: wrap !important; gap: 16px !important; }
  .hl-table-scroll, .table-wrap, .explorer-scroll {
    min-width: 0 !important;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .grid-header, .grid-row { min-width: 760px; }
}

@media (max-width: 720px) {
  :root {
    --hl-space-1: 4px;
    --hl-space-2: 8px;
    --hl-space-3: 12px;
    --hl-space-4: 16px;
    --hl-space-5: 24px;
    --hl-space-6: 32px;
    --hl-type-body: 16px;
    --hl-type-small: 15px;
    --hl-type-heading: 28px;
  }
  body:not(:has(> #root)) {
    font-size: var(--hl-type-body) !important;
    overflow-wrap: anywhere;
  }
  body:not(:has(> #root)) :where(div, section, main, header, footer, nav, form, article, aside) {
    min-width: 0;
    box-sizing: border-box;
  }
  body:not(:has(> #root)) :where(p, span, a, button, input, select, textarea, label, li, td, th, dt, dd, summary, small, div, section, nav, text, cite) {
    font-size: max(var(--hl-type-small), 1em) !important;
  }
  body:not(:has(> #root)) :where(h1) { font-size: var(--hl-type-heading) !important; }
  body:not(:has(> #root)) :where(h2) { font-size: 22px !important; }
  body:not(:has(> #root)) :where(h3) { font-size: 18px !important; }
  body:not(:has(> #root)) :where(input, select, textarea) {
    font-size: var(--hl-type-body) !important;
    max-width: 100%;
    box-sizing: border-box;
  }
  body:not(:has(> #root)) :where(button, input, select, summary, a[href]) {
    min-height: 44px !important;
  }
  body:not(:has(> #root)) button { min-width: 44px !important; }
  body:not(:has(> #root)) a[href]:not([hidden]) { display: inline-flex; align-items: center; }
  body:not(:has(> #root)) :where(img, svg) { max-width: 100%; }
  .hl-root, [data-screen-label], .explorer-shell { min-width: 0 !important; }
  .hl-stack-many, .hl-stack-two, .hl-bound-grid, .stats, .discovery-grid, .explorer-view-grid,
  .versus, .odds-row, .news-ticker {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .hl-stack-many > *, .hl-stack-two > * { min-width: 0 !important; }
  body:not(:has(> #root)) [style*="display: flex"]:not([style*="flex-direction: column"]) { flex-wrap: wrap; }
  .hl-root > div, [data-screen-label][style*="min-height: 100vh"] > div,
  [data-screen-label][style*="min-height: 100vh"] > main,
  .explorer-pad, .status-strip, .masthead, .band, .preview-band,
  .site-footer, body > main, .hl-stage {
    padding-left: var(--hl-space-4) !important;
    padding-right: var(--hl-space-4) !important;
  }
  .hl-root [data-screen-label], .hl-stack-two > div > div {
    padding-left: var(--hl-space-4) !important;
    padding-right: var(--hl-space-4) !important;
  }
  .status-strip, .hl-strip { flex-wrap: wrap; gap: var(--hl-space-2); }
  .hl-masthead, .masthead { gap: var(--hl-space-4) !important; align-items: center !important; }
  .hl-nav, .masthead nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex: 0 0 100%;
    order: 2;
    width: 100% !important;
    max-width: 100%;
    gap: 16px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
  }
  .hl-nav > a, .masthead nav > a { flex: 0 0 auto; min-height: 44px; }
  .hl-masthead-search, .masthead-search-stack {
    display: flex !important;
    flex-basis: 100%;
    width: 100%;
    order: 3;
    align-items: stretch !important;
  }
  .hl-masthead-search > div, .masthead .search { display: flex; width: 100%; }
  .hl-masthead-search input, .masthead .search input {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1;
  }
  .site-footer, .hl-footer { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  .site-footer .links, .hl-footer .hl-legal { flex-wrap: wrap; }
  .hl-table-grid { min-width: 640px !important; }
  [data-screen-label="Results table"] .hl-table-grid { min-width: 1100px !important; }
  .hl-table-scroll { -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-width: 640px; }
  .explorer-scroll > svg, .explorer-scroll > canvas { min-width: 640px; }
  .explorer-scroll > .explorer-chart { min-width: 640px !important; }
  .hl-table-scroll:focus-visible, .table-wrap:focus-visible, .hl-nav:focus-visible {
    outline: 2px solid var(--hl-gold);
    outline-offset: -2px;
  }
}
