/* Site-level corrections layered on top of the design system.
 *
 * styles.css is a near-verbatim copy of the design-tool export and is expected to
 * be overwritten whenever the design is re-exported. Everything this site adds or
 * fixes lives here instead, so a re-export cannot silently drop it.
 *
 * Load order matters: this file must come after styles.css.
 */

/* Table captions are read by screen readers but not shown, so each table is
   announced with the models it covers while the visual design is unchanged. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The nav is sticky, so an anchor jump would otherwise land with the section
   heading hidden underneath it. --nav-h is the tallest the bar gets. */
:root {
  --nav-h: 76px;
}

section[id] {
  scroll-margin-top: calc(var(--nav-h) + 8px);
}

/* The export's nav is a single nowrap flex row inside an overflow-x:clip wrapper.
   Below roughly 900px the last links are clipped away entirely — silently, because
   the clip suppresses the usual overflow. Making the links their own scrollable
   strip keeps every section reachable while preserving the single-row design and
   leaving the brand anchored. */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Fades the right edge only while there is more to scroll to, hinting at the
     off-screen links without adding a permanent overlay. */
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}

.nav-links::-webkit-scrollbar {
  display: none;
}

/* Once everything fits there is nothing to hint at, so drop the fade. */
@media (min-width: 900px) {
  .nav-links {
    overflow-x: visible;
    mask-image: none;
  }
}

.nav-links a {
  white-space: nowrap;
}

/* Touch targets. Scoped to coarse pointers so the desktop composition is
   untouched: the nav links are 22px tall and the buttons 32px, both below the
   44px comfortable minimum for a finger. */
@media (pointer: coarse) {
  .nav-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .btn {
    min-height: 44px;
  }
}

/* Keyboard focus must stay visible against both the light background and the
   filled primary button. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--color-accent-700);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* The design animates sections in with scroll-driven animations. Anyone who has
   asked for less motion should get the finished state immediately rather than a
   faster version of the same movement. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    animation-timeline: auto !important;
  }
}

/* The tables are table-layout:fixed with 24px cell padding baked into inline
   styles. At phone widths the first column resolves to about 112px, of which 48px
   is padding, so a single long word like "Specification" cannot fit or wrap and
   spills across the next column. Tightening the padding and letting long words
   break keeps the columns intact. !important is required only because the padding
   comes from an inline style attribute. */
.table th,
.table td {
  overflow-wrap: break-word;
}

@media (max-width: 700px) {
  .table th,
  .table td,
  .table caption {
    padding-inline: 10px !important;
  }

  /* The colgroups carry desktop percentages (and one 76px fixed column) chosen for
     a ~1000px table. Forcing them onto a phone starves whichever column is left
     with the remainder. Handing sizing back to the browser lets each column take
     what its content actually needs. */
  .table {
    table-layout: auto !important;
  }

  .table col {
    width: auto !important;
  }

  /* Uppercase letterspaced row labels are expensive in a narrow column. */
  .table th {
    font-size: 11px !important;
    letter-spacing: 0.02em !important;
  }

  /* The value column sets white-space:nowrap and font-size:22px inline for the
     display-figure treatment. In a fixed 22% column on a phone that guarantees a
     spill, so on narrow screens the figures wrap and scale down. Weight and the
     heading typeface are untouched, so the emphasis survives. */
  .table td {
    white-space: normal !important;
    font-size: clamp(12px, 3.4vw, 15px) !important;
    line-height: 1.4 !important;
  }
}

/* The export's section grids are fixed column counts with no breakpoints, so on a
   phone the motor cards stayed side by side and their content was cut off by the
   wrapper's overflow-x:clip rather than producing a scrollbar. auto-fit reproduces
   the intended desktop column count (empty tracks collapse, so a two-item grid
   still yields two columns) while folding down on its own as space runs out —
   no breakpoint guessing. The min(…, 100%) guard stops the track minimum from
   exceeding the container on very narrow phones, which would otherwise push the
   cards back outside the viewport at 320px. */
[data-grid="pair"] {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)) !important;
}

[data-grid="parts"] {
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)) !important;
}

/* The four-column line-data table cannot fit at 320px even at content-based widths,
   and the wrapper's overflow-x:clip would hide the overspill rather than show it.
   Letting the frame that holds a table scroll keeps the data reachable. `auto`
   means no scrollbar appears at widths where everything already fits. */
@media (max-width: 700px) {
  .blueprint:has(.table) {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
}