/* Ryzenith responsive overrides.
 *
 * The Ryzenith pages are a static export from a design tool: every rule is an
 * inline style attribute and the export ships zero media queries, so the pages
 * were laid out for desktop only. This file is the one hand-written stylesheet
 * in the export and is linked last from every page's <helmet>.
 *
 * Because it has to beat inline styles, every declaration needs !important.
 * That is the cost of not rebuilding the export as components; keep this file
 * small and structural, and do not use it for restyling.
 *
 * Re-exporting from the design tool drops the <link> to this file. Re-add it to
 * every page (see CLAUDE.md) or the pages ship desktop-only again.
 */

/* ---------------------------------------------------------------- anchors --
 * The nav is sticky at 68px (taller on mobile, see below) but nothing in the
 * export offsets in-page anchor targets, so /ryzenith#splits and #learn landed
 * with their headings hidden underneath it at every width.
 */
:target,
#splits,
#learn,
#adaptive,
#insights,
#footer {
  scroll-margin-top: 84px;
}

@media (max-width: 820px) {
  :target,
  #splits,
  #learn,
  #adaptive,
  #insights,
  #footer {
    scroll-margin-top: 100px;
  }
}

/* -------------------------------------------------------------------- nav --
 * Desktop nav is a single 68px row: logo | 5 links + "private beta" pill.
 * That content needs ~720px, but the export pinned height to 68px while
 * letting the link group wrap, so under ~820px the links wrapped to three rows
 * inside a 68px box and overflowed above and below it — the first row of links
 * was clipped off the top of the page entirely.
 *
 * Below 820px the nav becomes two rows instead: logo + pill, then a single
 * no-wrap row of links that scrolls horizontally if it ever has to.
 */
@media (max-width: 820px) {
  nav {
    height: auto !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    padding: 0 16px !important;
  }

  /* row 1: logo, pill */
  nav > a {
    min-height: 48px !important;
  }
  nav > a img {
    width: 26px !important;
    height: 26px !important;
  }
  nav > a span {
    font-size: 17px !important;
  }

  /* row 2: the link strip, full width under the logo */
  nav > div {
    order: 2 !important;
    flex: 1 0 100% !important;
    flex-wrap: nowrap !important;
    /* Grouped from the left with a real gap. Stretching five links across a
       780px tablet with space-between reads as broken, not as a nav. */
    justify-content: flex-start !important;
    gap: clamp(18px, 4vw, 40px) !important;
    /* Falls back to a scroll strip rather than clipping if a future link set
       stops fitting. The current sets all fit down to 320px, so the scrollbar
       is hidden — it reads as a nav row, not as a scroller. */
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    border-top: 1px solid #17191d !important;
  }
  nav > div::-webkit-scrollbar {
    display: none !important;
  }

  nav > div > a {
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
    /* Padding, not height, so the whole strip row is the tap target and each
       link clears the 44px floor. */
    padding: 15px 6px !important;
    flex: 0 0 auto !important;
  }

  /* The pill lifts out of the link strip onto row 1, opposite the logo. The
     nav is sticky, so it is the pill's containing block and the pill is not
     clipped by the strip's scroll container. "Private beta" is a bare text
     node in the export and cannot be hidden on its own, so the whole pill
     scales down to sit beside the logo at 320px. */
  nav > div > span {
    position: absolute !important;
    top: 11px !important;
    right: 16px !important;
    font-size: 11px !important;
    padding: 5px 12px !important;
    gap: 6px !important;
  }
  nav > div > span span {
    position: static !important;
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }
}

/* Phone widths: there is no room to group the links, so spread them edge to
   edge and let the row itself be the rhythm. */
@media (max-width: 430px) {
  nav > div {
    justify-content: space-between !important;
    gap: 0 !important;
  }
}

/* Narrow phones: the pill and the logo stop coexisting comfortably under
   ~340px, so drop the pill. The hero and footer both still carry the beta
   status, so nothing is lost. */
@media (max-width: 339px) {
  nav > div > span {
    display: none !important;
  }
}

/* ---------------------------------------------------------------- content --
 * Most of the export's grids are `auto-fit, minmax(min(100%, Npx), 1fr)` and
 * collapse to one column on their own. The literal `1fr 1fr` grids that are
 * left — the coach rule table, the privacy iCloud table — are matched pairs
 * whose two columns have to be read against each other, and they still read at
 * ~135px per column on a 375px phone, so they are deliberately left alone.
 *
 * The split/program preset cards are `min-height: 132px` +
 * `justify-content: space-between`, sized for the 258px column they sit in on
 * desktop, where the tag and description each wrap to two or three lines and
 * fill the card. In the single 335px column on a phone nothing wraps, so
 * space-between pushed the name to the floor and left a dead hole in the
 * middle of every card. Let them hug their content instead.
 *
 * Matching on the inline style is ugly but it is the only handle the export
 * gives us — there are no classes anywhere in these pages. */
@media (max-width: 640px) {
  div[style*="min-height: 132px"] {
    min-height: 0 !important;
    justify-content: flex-start !important;
  }
}

/* Shared structural and keyboard defaults. The export sizes cards as content
 * boxes, so their padding used to push nominally full-width cards off phones. */
*,
*::before,
*::after {
  box-sizing: border-box !important;
}

html {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

main {
  min-width: 0 !important;
}

main:focus {
  outline: none !important;
}

button,
a {
  touch-action: manipulation !important;
}

button {
  min-height: 44px !important;
  min-width: 44px !important;
}

a:focus-visible,
button:focus-visible,
video:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 2px solid #C8FF00 !important;
  outline-offset: 4px !important;
}

.skip-link {
  position: fixed !important;
  top: 8px !important;
  left: 16px !important;
  z-index: 100 !important;
  padding: 12px 16px !important;
  background: #000000 !important;
  color: #C8FF00 !important;
  transform: translateY(-200%) !important;
}

.skip-link:focus {
  transform: none !important;
}

.motion-toggle {
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 16px !important;
  padding: 10px 14px !important;
  border: 1px solid #2A2E35 !important;
  border-radius: 12px !important;
  background: #000000 !important;
  color: #A1A1A8 !important;
  font: inherit !important;
  font-size: 13px !important;
  cursor: pointer !important;
}

.learn-term {
  position: relative !important;
  display: inline-block !important;
}

footer a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
}

@media (max-width: 640px) {
  /* The desktop overlay extended 84px left of the phone and clipped its own
   * Log set control. Keep the complete card visible beneath the phone. */
  [data-hero-lock-card] {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    width: min(100%, 288px) !important;
    margin: -64px auto 0 !important;
  }

  main [style*="width: 300px"],
  main [style*="width: 210px"] {
    max-width: 100% !important;
  }

  /* The term can occur at either edge of a wrapped paragraph. Flow its
   * definition into the paragraph on phones instead of clipping a popover. */
  .learn-term {
    position: static !important;
    display: inline !important;
  }

  #rep-range-definition {
    position: static !important;
    display: block !important;
    width: 100% !important;
    margin: 12px 0 !important;
  }

  nav {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}