/* Rigor · site base, shared by every page
   ------------------------------------------------------------------
   The design system (../design-system/styles.css) supplies the tokens,
   verbatim from the Claude Design export; the pages carry their own
   inline styles, as the canvases did. This file holds only what the
   canvases could not express as inline style: the document base, the
   shine keyframes the wordmark component injected at runtime, the
   FAQ's keyboard and focus behavior, the narrow-screen nav, and the
   reduced-motion rule. Values are the canvas's; class names are ours. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; background: #070A12; }
body { min-height: 100vh; color: #FFFFFF; overflow-x: clip; }
img, video, svg { max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--rg-primary-light); outline-offset: 3px; border-radius: 6px; }

/* ---------- Shine (RgShiningText) ----------
   The design system injected these keyframes when the component
   mounted; js/site.js starts the sweep when the wordmark scrolls into
   view, which is what the canvas's own script did. */
@keyframes rg-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- FAQ ----------
   The rows toggle by mutating the same inline styles the runtime set
   (max-height, opacity, the plus sign's rotation); this only adds the
   pointer and the keyboard affordance. */
[data-faq-toggle] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
[data-faq-toggle]:focus-visible { outline-offset: -2px; }

/* ---------- Nav on narrow screens ----------
   The canvas lays the seven links out in a row. Under 1020px the row hides
   behind a Menu button and drops down under the bar (seven links and the
   Download button need about 1,000px; the breakpoint was 760px for six). */
.rg-nav-menu {
  display: none;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  background: transparent;
  color: #FFFFFF;
  font: 600 13px/1 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  cursor: pointer;
}
@media (max-width: 1020px) {
  /* !important because the canvas sets the bar's padding and gap inline,
     which outranks a stylesheet rule; without it the phone bar kept its
     40px sides and 28px gaps (2026-10-09, found when the app icon joined
     the wordmark and pushed Download past a 375px screen). */
  #rg-nav > div { gap: 12px !important; padding: 12px 20px !important; }
  .rg-nav-menu { display: inline-flex; }
  .rg-nav-links {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px !important;
    padding: 8px clamp(16px, 4vw, 24px) 14px;
    background: rgba(10,14,26,0.96);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-bottom: 0.5px solid rgba(255,255,255,0.08);
  }
  .rg-nav-links.is-open { display: flex !important; }
  .rg-nav-links a { display: block; padding: 10px 0; font-size: 16px; }
}

/* ---------- Narrow-screen spacing ----------
   The canvases pad most sections 40px at the sides. Under 600px that
   leaves too little room for the type, so the fixed side paddings step
   down; the values the canvases wrote with clamp() already scale. */
@media (max-width: 600px) {
  [style*="padding:110px 40px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding:130px 40px 120px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding:40px 40px 110px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding:0 40px 120px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding:0 40px 110px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding:28px 40px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding:90px 40px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding:100px 40px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding:80px 40px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding:60px 40px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding:10px 40px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding:0 40px 100px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding:0 40px 90px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding:0 40px 80px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding:0 40px 60px"] { padding-left: 20px !important; padding-right: 20px !important; }

  /* A card grid whose minimum track (340px or so) is wider than a phone's
     content box overflows the right edge; one column, no minimum. */
  [style*="grid-template-columns:repeat(auto-fit,minmax("] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="grid-template-columns:repeat(auto-fill,minmax("] { grid-template-columns: minmax(0, 1fr) !important; }

  /* The masked word (TRAIN and its siblings) sits over a clip with a caption
     row pinned to the block's bottom. On a phone the captions wrap to three
     lines and climb into the word, so the block gets more room below. */
  [style*="mix-blend-mode:multiply"][style*="padding:110px 40px"] { padding-top: 90px !important; padding-bottom: 170px !important; }
  [style*="bottom:34px"][style*="flex-wrap:wrap"] { gap: 10px 22px !important; bottom: 28px !important; }

  /* The published-gates card (selection page) lays each gate out as name,
     tag, value on one line; on a phone the name is squeezed to a word a
     line, so it takes the full row and the tag and value sit under it. */
  [style*="flex-direction:column;gap:10px;margin-top:12px"] > div { flex-wrap: wrap !important; row-gap: 4px !important; }
  [style*="flex-direction:column;gap:10px;margin-top:12px"] > div > span:first-child { flex-basis: 100% !important; }
}

/* ---------- Reduced motion ----------
   js/site.js skips the parallax, the reveals, the counters and the
   sweeps when this is on; the rule below catches anything animated by
   the canvases' own keyframes. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
}