/* ===================== Fonts ===================== */
@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable-Italic.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Medium.ttf") format("truetype");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMonoNL-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===================== Tokens ===================== */
:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ===================== Reset / base ===================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #FAFAFA; }
body {
  font-family: var(--font-sans);
  color: #0A0A0A;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; }

/* ===================== Interactions ===================== */
.rl-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: border-color 120ms cubic-bezier(0.2, 0, 0, 1);
}
.rl-card:hover { border-color: #D4D4D4; }
/* Push the "Fix this" CTA to the bottom so same-row cards align.
   Override the inline margin-top with !important; the 11px min gap above
   the CTA is preserved by margin-bottom on the FIX block below. */
.rl-fixlink { margin-top: auto !important; }

.rl-fixlink {
  transition: background 120ms cubic-bezier(0.2, 0, 0, 1),
              border-color 120ms cubic-bezier(0.2, 0, 0, 1);
}
.rl-fixlink:hover { background: #F5F5F5; border-color: #D4D4D4; }
.rl-fixlink svg { transition: transform 120ms cubic-bezier(0.2, 0, 0, 1); }
.rl-fixlink:hover svg { transform: translateX(3px); }

.rl-input-dark::placeholder { color: #9CA3AF; }
.rl-input-dark:focus {
  outline: none;
  border-color: #fff;
  box-shadow: 0 0 0 1px #fff;
}
.rl-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0A0A0A;
}

/* segmented toggle transition */
.rl-tab { transition: all 120ms cubic-bezier(0.2, 0, 0, 1); }