/* ============================================================
   RobEn Recruitment Flow v2 — "Crew Pass"
   Design system: glass cards on the brand aurora, light + dark.
   Scoped to .rf — nothing here touches the rest of roben.club.
   ============================================================ */

/* ---------- Tokens ---------- */

.rf {
  /* Light — ice-blue day */
  --rf-canvas: #eef4fd;
  --rf-canvas-2: #e4edfc;
  --rf-surface: rgba(255, 255, 255, 0.84);
  --rf-surface-solid: #ffffff;
  --rf-surface-soft: rgba(255, 255, 255, 0.55);
  --rf-ink: #17204a;
  --rf-ink-2: #4a5578;
  --rf-ink-3: #6b7699;
  --rf-line: rgba(23, 32, 74, 0.09);
  --rf-line-strong: rgba(23, 32, 74, 0.16);
  --rf-brand: #4460dd;
  --rf-brand-deep: #3a4fc0;
  --rf-violet: #5f2996;
  --rf-accent: #0aa8c7;
  --rf-on-brand: #ffffff;
  --rf-success: #158a4e;
  --rf-success-soft: rgba(21, 138, 78, 0.1);
  --rf-danger: #d63947;
  --rf-danger-soft: rgba(214, 57, 71, 0.08);
  --rf-warn: #9a6700;
  --rf-shadow: 0 24px 60px -18px rgba(59, 82, 194, 0.28);
  --rf-shadow-sm: 0 10px 28px -12px rgba(59, 82, 194, 0.22);
  --rf-glow: rgba(68, 96, 221, 0.32);
  --rf-aurora-1: rgba(68, 96, 221, 0.2);
  --rf-aurora-2: rgba(95, 41, 150, 0.14);
  --rf-aurora-3: rgba(13, 202, 240, 0.12);
  --rf-photo-ring: rgba(68, 96, 221, 0.35);
  --rf-nav-bg: rgba(238, 244, 253, 0.75);

  color-scheme: light;
  --rf-radius: 16px;
  --rf-radius-sm: 12px;
  --rf-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.rf[data-theme="dark"] {
  /* Dark — deep-space night */
  --rf-canvas: #0b1027;
  --rf-canvas-2: #0d1330;
  --rf-surface: rgba(24, 31, 66, 0.62);
  --rf-surface-solid: #161d40;
  --rf-surface-soft: rgba(24, 31, 66, 0.4);
  --rf-ink: #e9edff;
  --rf-ink-2: #a6b0dd;
  --rf-ink-3: #7883b4;
  --rf-line: rgba(233, 237, 255, 0.1);
  --rf-line-strong: rgba(233, 237, 255, 0.18);
  --rf-brand: #7b93ff;
  --rf-brand-deep: #4460dd;
  --rf-violet: #b07ce4;
  --rf-accent: #2fd4f0;
  --rf-on-brand: #0b1027;
  --rf-success: #4cd495;
  --rf-success-soft: rgba(76, 212, 149, 0.12);
  --rf-danger: #ff7b88;
  --rf-danger-soft: rgba(255, 123, 136, 0.1);
  --rf-warn: #ffce6b;
  --rf-shadow: none;
  --rf-shadow-sm: none;
  --rf-glow: rgba(123, 147, 255, 0.45);
  --rf-aurora-1: rgba(68, 96, 221, 0.32);
  --rf-aurora-2: rgba(120, 60, 190, 0.25);
  --rf-aurora-3: rgba(13, 202, 240, 0.09);
  --rf-photo-ring: rgba(123, 147, 255, 0.5);
  --rf-nav-bg: rgba(11, 16, 39, 0.78);

  color-scheme: dark;
}

/* ---------- Foundation ---------- */

.rf {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--rf-canvas);
  color: var(--rf-ink);
  font-family: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: clip;
}

.rf ::selection {
  background: var(--rf-brand);
  color: #fff;
}

.rf :focus-visible {
  outline: 2px solid var(--rf-brand);
  outline-offset: 2px;
  border-radius: 6px;
}

.rf input, .rf textarea, .rf select, .rf button {
  font: inherit;
  color: inherit;
}

.rf input::placeholder, .rf textarea::placeholder {
  color: var(--rf-ink-3);
}

.rf input, .rf textarea {
  caret-color: var(--rf-brand);
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--rf-line-strong);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}

/* ---------- Aurora canvas ---------- */

.rf-aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42rem 30rem at 8% -6%, var(--rf-aurora-1), transparent 65%),
    radial-gradient(38rem 34rem at 96% 12%, var(--rf-aurora-2), transparent 60%),
    radial-gradient(30rem 26rem at 50% 108%, var(--rf-aurora-3), transparent 60%),
    linear-gradient(180deg, var(--rf-canvas), var(--rf-canvas-2));
}

.rf-watermark {
  position: fixed;
  right: -6rem;
  bottom: -7rem;
  width: 26rem;
  height: 26rem;
  z-index: 0;
  pointer-events: none;
  opacity: 0.055;
  filter: saturate(1.4);
}

.rf[data-theme="dark"] .rf-watermark { opacity: 0.07; }

/* ---------- Navbar ---------- */

/* Floating liquid-glass bar: detaches from the viewport edge, blurs what
   passes under it, and catches a slow travelling sheen. */
.rf-nav {
  position: sticky;
  top: 0.65rem;
  z-index: 40;
  width: min(100%, 46rem);
  margin: 0.65rem auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.65rem 0.55rem 0.9rem;
  border-radius: 999px;
  background:
    linear-gradient(120deg,
      color-mix(in srgb, var(--rf-nav-bg) 82%, transparent),
      color-mix(in srgb, var(--rf-nav-bg) 55%, transparent) 45%,
      color-mix(in srgb, var(--rf-nav-bg) 82%, transparent));
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid color-mix(in srgb, var(--rf-surface-solid) 55%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent),
    0 12px 32px -14px rgba(23, 32, 74, 0.35);
  overflow: hidden;
  isolation: isolate;
  animation: rf-nav-in 0.7s var(--rf-ease) both;
}

.rf[data-theme="dark"] .rf-nav {
  border-color: color-mix(in srgb, #fff 10%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent),
    0 12px 32px -14px rgba(0, 0, 0, 0.55);
}

@keyframes rf-nav-in {
  from { opacity: 0; transform: translateY(-0.8rem); }
  to { opacity: 1; transform: none; }
}

/* the sheen — a narrow light band drifting across the glass once on load,
   then settling into a very slow ambient loop */
.rf-nav::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -30%;
  width: 34%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(105deg, transparent, color-mix(in srgb, #fff 22%, transparent), transparent);
  transform: skewX(-18deg);
  animation: rf-sheen 9s var(--rf-ease) infinite;
}

@keyframes rf-sheen {
  0% { left: -35%; opacity: 0; }
  8% { opacity: 1; }
  26% { left: 115%; opacity: 0; }
  100% { left: 115%; opacity: 0; }
}

.rf-nav.is-scrolled {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  background:
    linear-gradient(120deg,
      color-mix(in srgb, var(--rf-nav-bg) 94%, transparent),
      color-mix(in srgb, var(--rf-nav-bg) 78%, transparent) 45%,
      color-mix(in srgb, var(--rf-nav-bg) 94%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent),
    0 16px 40px -16px rgba(23, 32, 74, 0.45);
}

.rf[data-theme="dark"] .rf-nav.is-scrolled {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent),
    0 16px 40px -16px rgba(0, 0, 0, 0.65);
}

.rf-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--rf-ink);
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  min-width: 0;
}

.rf-nav-brand img {
  width: 2.25rem;
  height: 2.25rem;
  display: block;
  transition: transform 0.35s var(--rf-ease);
}

.rf-nav-brand:hover img { transform: rotate(-6deg) scale(1.06); }

.rf-nav-brand .rf-brand-sub {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rf-ink-3);
  line-height: 1;
}

.rf-nav-actions { display: flex; align-items: center; gap: 0.45rem; }

/* frosted action pill inside the bar */
.rf-nav-actions .rf-btn-ghost {
  background: color-mix(in srgb, var(--rf-surface-solid) 42%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.22s var(--rf-ease), color 0.2s, border-color 0.2s, background 0.2s;
}

.rf-nav-actions .rf-btn-ghost:hover {
  color: var(--rf-brand);
  border-color: var(--rf-brand);
  background: color-mix(in srgb, var(--rf-brand) 10%, transparent);
  transform: translateY(-1px);
}

.rf-nav-actions .rf-btn-ghost:active { transform: translateY(0) scale(0.97); }

.rf-theme-toggle {
  width: 2.55rem;
  height: 2.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--rf-line-strong);
  background: color-mix(in srgb, var(--rf-surface-solid) 42%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--rf-ink-2);
  cursor: pointer;
  transition: transform 0.25s var(--rf-ease), color 0.2s, border-color 0.2s;
}

.rf-theme-toggle:hover { color: var(--rf-brand); border-color: var(--rf-brand); transform: translateY(-1px) rotate(8deg); }
.rf-theme-toggle:active { transform: scale(0.92); }

.rf-theme-toggle .bi-sun { display: none; }
.rf[data-theme="dark"] .rf-theme-toggle .bi-sun { display: block; animation: rf-icon-in 0.35s var(--rf-ease); }
.rf[data-theme="dark"] .rf-theme-toggle .bi-moon-stars { display: none; }
.rf-theme-toggle .bi-moon-stars { animation: rf-icon-in 0.35s var(--rf-ease); }

@keyframes rf-icon-in {
  from { opacity: 0; transform: rotate(-60deg) scale(0.5); }
  to { opacity: 1; transform: none; }
}

/* ---------- Layout ---------- */

.rf-main {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2.25rem) clamp(1rem, 4vw, 2rem) 4rem;
}

.rf-page .rf-main { max-width: 40rem; }

/* ---------- Headline block ---------- */

.rf-head { margin: 0.75rem 0 1.5rem; }

.rf-title {
  font-size: clamp(2rem, 6vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0 0 0.6rem;
  text-wrap: balance;
}

.rf-title .rf-title-team {
  display: block;
  color: var(--rf-brand);
}

.rf-sub {
  color: var(--rf-ink-2);
  font-size: 1.02rem;
  max-width: 38ch;
  margin: 0;
}

.rf-season-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.34rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--rf-line-strong);
  background: var(--rf-surface-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--rf-ink-2);
  margin-bottom: 1rem;
}

.rf-season-chip .bi {
  color: var(--rf-success);
  font-size: 0.7rem;
}

/* ---------- Progress rail ---------- */

.rf-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
  margin: 0 0 1.75rem;
  padding: 0.9rem 1rem;
  border-radius: var(--rf-radius);
  background: var(--rf-surface);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--rf-shadow-sm);
}

/* signed-in flow: the account node is removed from the DOM */
.rf-rail.rf-rail-trio { grid-template-columns: repeat(3, 1fr); }

.rf[data-theme="dark"] .rf-rail { border: 1px solid var(--rf-line); box-shadow: none; }

.rf-rail-step {
  --node: var(--rf-ink-3);
  --fill: 0%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 0;
  padding: 0;
  cursor: default;
}

.rf-rail-step.is-clickable { cursor: pointer; }

.rf-rail-track {
  position: absolute;
  top: 1rem;
  left: calc(-50% + 1.1rem);
  width: calc(100% - 2.2rem);
  height: 2px;
  background: var(--rf-line-strong);
  border-radius: 2px;
  overflow: hidden;
}

.rf-rail-step:first-child .rf-rail-track { display: none; }

.rf-rail-track::after {
  content: "";
  position: absolute;
  inset: 0;
  transform-origin: left;
  transform: scaleX(var(--fill));
  background: linear-gradient(90deg, var(--rf-brand), var(--rf-violet));
  transition: transform 0.45s var(--rf-ease);
}

.rf-rail-node {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--node);
  border: 2px solid var(--rf-line-strong);
  background: var(--rf-surface-solid);
  transition: color 0.3s, border-color 0.3s, background 0.3s;
  position: relative;
  z-index: 1;
}

.rf-rail-step.is-done .rf-rail-node {
  background: linear-gradient(135deg, var(--rf-brand), var(--rf-violet));
  border-color: transparent;
  color: #fff;
}

.rf-rail-step.is-done .rf-rail-node .rf-rail-num { display: none; }
.rf-rail-step .rf-rail-node .bi-check { display: none; font-size: 0.9rem; }
.rf-rail-step.is-done .rf-rail-node .bi-check { display: block; }

.rf-rail-step.is-active .rf-rail-node {
  border-color: var(--rf-brand);
  color: var(--rf-brand);
  box-shadow: 0 0 0 5px var(--rf-glow);
}

.rf-rail-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--rf-ink-3);
}

.rf-rail-step.is-active .rf-rail-label { color: var(--rf-ink); }
.rf-rail-step.is-done .rf-rail-label { color: var(--rf-ink-2); }

/* ---------- Cards ---------- */

.rf-card {
  position: relative;
  border-radius: var(--rf-radius);
  background: var(--rf-surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--rf-shadow);
  padding: clamp(1.25rem, 4vw, 2rem);
}

.rf[data-theme="dark"] .rf-card { border: 1px solid var(--rf-line); box-shadow: none; }

/* ---------- Buttons ---------- */

.rf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0;
  border-radius: 999px;
  padding: 0.85rem 1.7rem;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.22s var(--rf-ease), box-shadow 0.22s var(--rf-ease),
    filter 0.2s, background 0.2s, color 0.2s, border-color 0.2s;
}

.rf-btn:active { transform: translateY(1px) scale(0.99); }

.rf-btn-primary {
  background: linear-gradient(135deg, var(--rf-brand), var(--rf-violet));
  color: #fff;
  box-shadow: 0 12px 28px -10px var(--rf-glow);
}

.rf-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -12px var(--rf-glow); }
.rf-btn-primary:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

.rf-btn-ghost {
  background: transparent;
  color: var(--rf-ink-2);
  border: 1px solid var(--rf-line-strong);
}

.rf-btn-ghost:hover { color: var(--rf-brand); border-color: var(--rf-brand); }

.rf-btn-danger {
  background: transparent;
  color: var(--rf-danger);
  border: 1px solid var(--rf-danger);
}

.rf-btn-danger:hover { background: var(--rf-danger-soft); }

.rf-btn-block { width: 100%; }

.rf-btn-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 0;
  color: var(--rf-ink-2);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.4rem 0.1rem;
  border-radius: 8px;
  transition: color 0.2s, transform 0.2s var(--rf-ease);
}

.rf-btn-back:hover { color: var(--rf-brand); transform: translateX(-2px); }

/* ---------- Forms ---------- */

.rf-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.rf-field { margin-bottom: 1.1rem; text-align: left; }

.rf-label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--rf-ink-2);
  margin-bottom: 0.4rem;
}

.rf-label .rf-req { color: var(--rf-danger); margin-left: 2px; }

.rf-input-wrap { position: relative; display: flex; align-items: center; }

.rf-input-wrap > .bi {
  position: absolute;
  left: 0.95rem;
  font-size: 1rem;
  color: var(--rf-ink-3);
  pointer-events: none;
  transition: color 0.2s;
}

.rf-input {
  width: 100%;
  border: 1.5px solid var(--rf-line-strong);
  border-radius: var(--rf-radius-sm);
  background: var(--rf-surface-solid);
  padding: 0.8rem 1rem 0.8rem 2.6rem;
  font-size: 0.98rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
}

.rf-input.no-icon { padding-left: 1rem; }

select.rf-input { padding-right: 2.4rem; cursor: pointer; }

.rf-select-chevron {
  position: absolute;
  right: 0.95rem;
  font-size: 0.8rem;
  color: var(--rf-ink-3);
  pointer-events: none;
}

.rf-input:focus {
  outline: none;
  border-color: var(--rf-brand);
  box-shadow: 0 0 0 4px var(--rf-glow);
}

.rf-input:focus + .rf-select-chevron,
.rf-input-wrap:focus-within > .bi { color: var(--rf-brand); }

.rf-field.is-error .rf-input { border-color: var(--rf-danger); }
.rf-field.is-error .rf-input-wrap > .bi { color: var(--rf-danger); }
.rf-field.is-valid .rf-input { border-color: var(--rf-success); }

.rf-error {
  display: none;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--rf-danger);
}

.rf-field.is-error .rf-error { display: flex; }

.rf-hint { font-size: 0.78rem; color: var(--rf-ink-3); margin-top: 0.35rem; }

textarea.rf-input { min-height: 6.5rem; resize: vertical; padding-top: 0.85rem; }

/* checkbox / radio option rows */
.rf-opt {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.65rem 0.85rem;
  border: 1.5px solid var(--rf-line-strong);
  border-radius: var(--rf-radius-sm);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  font-size: 0.92rem;
}

.rf-opt:hover { border-color: var(--rf-brand); }

.rf-opt input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.18rem;
  accent-color: var(--rf-brand);
  flex: none;
}

.rf-opt.is-checked {
  border-color: var(--rf-brand);
  background: var(--rf-success-soft);
}

.rf-opts { display: grid; gap: 0.5rem; }

/* ---------- Steps ---------- */

.rf-steps { position: relative; }

.rf-step {
  display: none;
  animation: rf-step-in 0.42s var(--rf-ease);
}

.rf-step.is-active { display: block; }

@keyframes rf-step-in {
  from { opacity: 0; transform: translateX(1.6rem); }
  to { opacity: 1; transform: translateX(0); }
}

.rf-step.is-back { animation-name: rf-step-in-back; }

@keyframes rf-step-in-back {
  from { opacity: 0; transform: translateX(-1.6rem); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---------- Identity chip (returning recruit) ---------- */

.rf-identity {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 1rem;
  border-radius: var(--rf-radius-sm);
  background: var(--rf-success-soft);
  border: 1px solid transparent;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}

.rf-identity img, .rf-identity .rf-avatar-fallback {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  object-fit: cover;
  flex: none;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--rf-brand), var(--rf-violet));
  color: #fff;
  font-weight: 700;
}

.rf-identity .rf-id-text { flex: 1; min-width: 0; }
.rf-identity .rf-id-name { font-weight: 700; }
.rf-identity .rf-id-mail {
  color: var(--rf-ink-2);
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rf-link-quiet {
  background: none;
  border: 0;
  color: var(--rf-ink-3);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rf-link-quiet:hover { color: var(--rf-danger); }

/* ---------- Team cards ---------- */

.rf-teams {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.rf-team {
  position: relative;
  border: 0;
  border-radius: var(--rf-radius);
  background: var(--rf-surface-solid);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  box-shadow: var(--rf-shadow-sm);
  transition: transform 0.28s var(--rf-ease), box-shadow 0.28s var(--rf-ease),
    outline-color 0.2s;
  outline: 2px solid transparent;
  outline-offset: 3px;
  display: flex;
  flex-direction: column;
}

.rf[data-theme="dark"] .rf-team { border: 1px solid var(--rf-line); box-shadow: none; }

.rf-team:hover {
  transform: translateY(-4px);
  box-shadow: var(--rf-shadow);
  outline-color: var(--rf-glow);
}

/* Team not accepting applications right now: dimmed, no lift, keeps the
   short reason readable inside .rf-team-meta. */
.rf-team-unavailable { cursor: not-allowed; }
.rf-team-unavailable .rf-team-cover-wrap { filter: grayscale(0.6); opacity: 0.75; }
.rf-team-unavailable:hover {
  transform: none;
  box-shadow: var(--rf-shadow-sm);
  outline-color: transparent;
}
.rf-team-unavailable .rf-team-meta span:first-child { color: var(--rf-ink-3); }

.rf-team-cover-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, var(--rf-brand), var(--rf-violet));
}

.rf-team-cover-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  color: rgba(255, 255, 255, 0.9);
  background: linear-gradient(135deg, var(--rf-brand), var(--rf-violet));
}

.rf-team-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rf-team-body { padding: 0.95rem 1.05rem 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }

.rf-team-name { font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; }

.rf-team-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.45rem;
  color: var(--rf-ink-3);
  font-size: 0.8rem;
  font-weight: 500;
}

.rf-team-meta .bi-arrow-right { transition: transform 0.25s var(--rf-ease); }
.rf-team:hover .rf-team-meta .bi-arrow-right { transform: translateX(4px); color: var(--rf-brand); }

.rf-teams-skeleton {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.rf-skel {
  border-radius: var(--rf-radius);
  background: var(--rf-surface-soft);
  position: relative;
  overflow: hidden;
}

.rf-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--rf-line), transparent);
  animation: rf-shimmer 1.4s infinite;
}

@keyframes rf-shimmer { to { transform: translateX(100%); } }

/* ---------- Application step sections ---------- */

.rf-apply-team {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--rf-ink-2);
  margin-bottom: 1.4rem;
}

.rf-apply-team img {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 8px;
  object-fit: cover;
}

.rf-section { margin-bottom: 2rem; }

/* one-time first-question scroll: keep the target clear of the sticky nav */
#section-questions { scroll-margin-top: 5rem; }

.rf-section-title {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.2rem;
}

.rf-section-title .bi { color: var(--rf-brand); font-size: 1rem; }

.rf-section-sub { color: var(--rf-ink-3); font-size: 0.85rem; margin: 0 0 0.9rem; }

/* Sub-team choice cards */
.rf-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }

.rf-choice {
  position: relative;
  border: 1.5px solid var(--rf-line-strong);
  border-radius: var(--rf-radius-sm);
  background: var(--rf-surface-solid);
  padding: 0.9rem 1rem 0.9rem 2.6rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, background 0.2s, transform 0.22s var(--rf-ease);
  font-size: 0.95rem;
}

.rf-choice:hover { border-color: var(--rf-brand); transform: translateY(-2px); }

.rf-choice input {
  position: absolute;
  left: 0.85rem;
  top: 1.15rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--rf-brand);
}

.rf-choice.is-selected {
  border-color: var(--rf-brand);
  background: var(--rf-success-soft);
  box-shadow: 0 0 0 4px var(--rf-glow);
}

.rf-choice .rf-choice-name { font-weight: 700; display: block; }
.rf-choice .rf-choice-desc {
  color: var(--rf-ink-3);
  font-size: 0.8rem;
  display: block;
  margin-top: 0.15rem;
  line-height: 1.45;
}

.rf-choice .rf-choice-flag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rf-success);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.4rem;
}

.rf-choice.is-applied {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

.rf-choice.is-applied .rf-choice-flag { color: var(--rf-ink-3); }

/* ---------- Custom dropdown (major / interview day / time) ---------- */

.rf-dd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.rf-dd { position: relative; }

.rf-dd-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1.5px solid var(--rf-line-strong);
  border-radius: var(--rf-radius-sm);
  background: var(--rf-surface-solid);
  padding: 0.8rem 0.95rem;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.rf-dd-btn:hover { border-color: var(--rf-brand); }

.rf-dd.is-open .rf-dd-btn {
  border-color: var(--rf-brand);
  box-shadow: 0 0 0 4px var(--rf-glow);
}

.rf-dd-btn .rf-dd-icon {
  color: var(--rf-ink-3);
  font-size: 1rem;
  flex: none;
}

.rf-dd-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rf-dd.is-placeholder .rf-dd-value { color: var(--rf-ink-3); font-weight: 400; }

.rf-dd-btn .bi-chevron-down {
  flex: none;
  font-size: 0.75rem;
  color: var(--rf-ink-3);
  transition: transform 0.28s var(--rf-ease);
}

.rf-dd.is-open .rf-dd-btn .bi-chevron-down { transform: rotate(180deg); color: var(--rf-brand); }

.rf-dd.is-error .rf-dd-btn { border-color: var(--rf-danger); }

.rf-dd-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.45rem);
  left: 0;
  right: 0;
  max-height: 17rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.4rem;
  border-radius: 14px;
  background: var(--rf-surface-solid);
  box-shadow: 0 24px 60px -12px rgba(23, 32, 74, 0.35);
  opacity: 0;
  transform: translateY(-6px) scaleY(0.97);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity 0.22s var(--rf-ease), transform 0.22s var(--rf-ease);
}

.rf[data-theme="dark"] .rf-dd-menu { border: 1px solid var(--rf-line); }

.rf-dd.is-open .rf-dd-menu,
.rf-dd-menu.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.rf-dd-opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 0;
  background: none;
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  font-size: 0.92rem;
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: background 0.15s;
}

.rf-dd-opt:hover, .rf-dd-opt.is-active { background: var(--rf-success-soft); }

.rf-dd-opt-title { flex: 1; min-width: 0; font-weight: 600; }

.rf-dd-opt-meta { font-size: 0.76rem; color: var(--rf-ink-3); font-weight: 500; white-space: nowrap; }

.rf-dd-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.14rem 0.5rem;
  border-radius: 999px;
  background: var(--rf-success-soft);
  color: var(--rf-success);
  white-space: nowrap;
}

.rf-dd-badge.is-full { background: var(--rf-danger-soft); color: var(--rf-danger); }
.rf-dd-badge.is-low { background: rgba(255, 193, 7, 0.16); color: var(--rf-warn); }

.rf-dd-opt .bi-check-lg {
  display: none;
  font-size: 0.95rem;
  color: var(--rf-brand);
}

.rf-dd-opt[aria-selected="true"] { background: var(--rf-success-soft); }
.rf-dd-opt[aria-selected="true"] .bi-check-lg { display: block; }
.rf-dd-opt[aria-selected="true"] .rf-dd-opt-title { color: var(--rf-brand); }

.rf-dd-opt.is-disabled { opacity: 0.42; cursor: not-allowed; }
.rf-dd-opt.is-disabled:hover { background: none; }

.rf-dd-empty {
  padding: 0.9rem 0.7rem;
  font-size: 0.85rem;
  color: var(--rf-ink-3);
  text-align: center;
}

/* mobile: the menu becomes a bottom sheet over a blurred scrim */
.rf-dd-scrim {
  display: none;
}

@media (max-width: 640px) {
  .rf-dd-grid { grid-template-columns: 1fr; }

  .rf-dd-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 45;
    background: color-mix(in srgb, #0b1027 38%, transparent);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s var(--rf-ease);
  }

  .rf-dd-scrim.is-open { opacity: 1; pointer-events: auto; }

  .rf-dd-menu {
    position: fixed;
    z-index: 46; /* above the scrim, which stays below the sheet */
    inset: auto 0 0 0;
    top: auto;
    max-height: min(70vh, 34rem);
    border-radius: 22px 22px 0 0;
    background: var(--rf-surface-solid);
    transform: translateY(100%);
    box-shadow: 0 -24px 60px -12px rgba(11, 16, 39, 0.55);
    padding: 0 0.55rem max(0.55rem, env(safe-area-inset-bottom));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transition: transform 0.34s var(--rf-ease), opacity 0.2s;
  }

  .rf[data-theme="dark"] .rf-dd-menu { background: var(--rf-surface-solid); }

  .rf-dd.is-open .rf-dd-menu,
  .rf-dd-menu.is-open { transform: none; }

  .rf-dd-sheet-head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--rf-surface-solid);
    padding: 0.15rem 0.4rem 0.55rem;
    text-align: center;
  }

  /* the drag handle doubles as the close affordance's visual anchor */
  .rf-dd-sheet-head::before {
    content: "";
    display: block;
    width: 2.6rem;
    height: 0.28rem;
    border-radius: 99px;
    background: var(--rf-line-strong);
    margin: 0.5rem auto 0.6rem;
  }

  .rf-dd-sheet-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rf-ink-3);
  }

  .rf-dd-btn { font-size: 1rem; min-height: 3rem; border-radius: 14px; }

  .rf-dd-opt {
    min-height: 3rem;
    padding: 0.75rem 0.8rem;
    font-size: 1rem;
    border-radius: 14px;
  }

  .rf-dd-opt:active { background: var(--rf-success-soft); }

  .rf-dd-empty { padding: 1.6rem 0.7rem; }
}

/* ---------- Photo module ---------- */

.rf-photo {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.rf-photo-frame {
  position: relative;
  width: 6.5rem;
  height: 6.5rem;
  flex: none;
}

.rf-photo-ring {
  position: absolute;
  inset: -5px;
  border-radius: 999px;
  border: 2px dashed var(--rf-photo-ring);
  transition: border 0.3s;
}

.rf-photo.has-photo .rf-photo-ring {
  border: 3px solid transparent;
  background: linear-gradient(135deg, var(--rf-brand), var(--rf-violet)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.rf-photo-img {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  display: block;
  background: var(--rf-canvas-2);
}

.rf-photo-empty {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  display: none;
  place-items: center;
  color: var(--rf-ink-3);
  font-size: 1.5rem;
  background: var(--rf-surface-solid);
}

.rf-photo:not(.has-photo) .rf-photo-empty { display: grid; }
.rf-photo:not(.has-photo) .rf-photo-img { display: none; }

.rf-photo-actions { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }

.rf-photo-note { font-size: 0.75rem; color: var(--rf-ink-3); margin-top: 0.15rem; }

/* ---------- Camera modal ---------- */

.rf-cam {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 1.5rem;
  background: rgba(8, 11, 30, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.rf-cam.is-open { display: flex; }

.rf-cam-stage {
  position: relative;
  width: min(22rem, 82vw);
  aspect-ratio: 3 / 4;
  border-radius: var(--rf-radius);
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
}

.rf-cam-stage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

.rf-cam-mask {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 9.5rem at center, transparent 96%, rgba(8, 11, 30, 0.72) 97%);
}

.rf-cam-ring {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 19.6rem;
  height: 19.6rem;
  max-width: 90%;
  max-height: 90%;
  aspect-ratio: 1;
  border-radius: 999px;
  border: 2px dashed rgba(255, 255, 255, 0.35);
}

.rf-cam-hint {
  position: absolute;
  bottom: 1rem;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  font-weight: 500;
}

.rf-cam-controls { display: flex; align-items: center; gap: 1.5rem; }

.rf-cam-capture {
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 999px;
  border: 4px solid rgba(255, 255, 255, 0.9);
  background: linear-gradient(135deg, var(--rf-brand), var(--rf-violet));
  color: #fff;
  font-size: 1.4rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.2s var(--rf-ease);
}

.rf-cam-capture:hover { transform: scale(1.06); }
.rf-cam-capture:active { transform: scale(0.95); }

.rf-cam-capture.is-capturing { animation: rf-pop 0.35s var(--rf-ease); }

@keyframes rf-pop {
  0% { transform: scale(1); }
  45% { transform: scale(0.88); }
  100% { transform: scale(1); }
}

.rf-cam-close {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  padding: 0.6rem 1.2rem;
  font-weight: 600;
  cursor: pointer;
}

.rf-cam-close:hover { border-color: #fff; color: #fff; }

.rf-cam-error {
  color: #ff9aa4;
  font-size: 0.9rem;
  text-align: center;
  max-width: 26rem;
}

/* ---------- Dynamic questions ---------- */

.rf-qpage-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rf-ink-3);
  margin: 1.75rem 0 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.rf-qpage-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rf-line);
}

/* ---------- Success pass ---------- */

.rf-pass {
  overflow: hidden;
  padding: 0;
  text-align: center;
}

.rf-pass-head {
  position: relative;
  padding: 2.25rem 2rem 3.4rem;
  background: linear-gradient(135deg, var(--rf-brand), var(--rf-violet));
  color: #fff;
}

.rf[data-theme="dark"] .rf-pass-head {
  background: linear-gradient(135deg, #3d53c4, #6b30a8);
}

.rf-pass-head .rf-pass-logo {
  width: 3.4rem;
  height: 3.4rem;
  margin-bottom: 0.6rem;
}

.rf-pass-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
}

.rf-pass-title { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; margin: 0.2rem 0 0; }

.rf-pass-photo {
  position: absolute;
  left: 50%;
  bottom: -3rem;
  transform: translateX(-50%);
  width: 6rem;
  height: 6rem;
  border-radius: 999px;
  object-fit: cover;
  border: 4px solid var(--rf-surface-solid);
  background: var(--rf-canvas-2);
}

.rf-pass-photo-fallback {
  position: absolute;
  left: 50%;
  bottom: -3rem;
  transform: translateX(-50%);
  width: 6rem;
  height: 6rem;
  border-radius: 999px;
  display: none;
  place-items: center;
  font-size: 2rem;
  color: #fff;
  border: 4px solid var(--rf-surface-solid);
  background: linear-gradient(135deg, var(--rf-brand), var(--rf-violet));
}

.rf-pass.no-photo .rf-pass-photo-fallback { display: grid; }
.rf-pass.no-photo .rf-pass-photo { display: none; }

.rf-pass-body { padding: 3.9rem 1.75rem 1.75rem; }

.rf-pass-rows { text-align: left; margin: 0 0 1.5rem; }

.rf-pass-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 0;
}

.rf-pass-row + .rf-pass-row { border-top: 1px dashed var(--rf-line-strong); }

.rf-pass-row .bi {
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  color: var(--rf-brand);
  background: var(--rf-success-soft);
}

.rf-pass-row-label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rf-ink-3); }
.rf-pass-row-value { font-weight: 700; font-size: 0.96rem; }

.rf-pass-actions { display: grid; gap: 0.6rem; }

.rf-pass-warn {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--rf-warn);
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
  text-align: left;
}

.rf-pass-reveal { animation: rf-reveal 0.6s var(--rf-ease); }

@keyframes rf-reveal {
  from { opacity: 0; transform: translateY(1.4rem) scale(0.97); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}

.rf-pass:not(.no-photo) .rf-check-burst { display: none; }
.rf-pass.no-photo .rf-pass-body { padding-top: 2.25rem; }

.rf-check-burst {
  width: 4.6rem;
  height: 4.6rem;
  margin: 0 auto 1rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 2rem;
  color: #fff;
  background: linear-gradient(135deg, var(--rf-brand), var(--rf-violet));
  box-shadow: 0 0 0 10px var(--rf-success-soft);
  animation: rf-pop 0.5s var(--rf-ease);
}

/* ---------- Toasts (Django messages) ---------- */

.rf-toasts {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: grid;
  gap: 0.5rem;
  width: min(26rem, calc(100vw - 2rem));
}

.rf-toast {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  border-radius: var(--rf-radius-sm);
  background: var(--rf-surface-solid);
  box-shadow: var(--rf-shadow);
  font-size: 0.88rem;
  font-weight: 500;
  border-left: none;
  animation: rf-step-in 0.35s var(--rf-ease);
}

.rf[data-theme="dark"] .rf-toast { border: 1px solid var(--rf-line); box-shadow: none; }

.rf-toast .bi { font-size: 1rem; margin-top: 0.1rem; }
.rf-toast-success .bi { color: var(--rf-success); }
.rf-toast-error .bi, .rf-toast-danger .bi { color: var(--rf-danger); }
.rf-toast-warning .bi { color: var(--rf-warn); }
.rf-toast-info .bi { color: var(--rf-brand); }

/* ---------- Loading / skeletons / banners ---------- */

.rf-banner {
  display: flex;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-radius: var(--rf-radius-sm);
  font-size: 0.88rem;
  margin-bottom: 1.25rem;
}

.rf-banner-edit {
  background: var(--rf-success-soft);
  border: 1px solid color-mix(in srgb, var(--rf-success) 30%, transparent);
  color: var(--rf-ink);
}
.rf-banner-edit i { color: var(--rf-success); }

.rf-dd.is-disabled .rf-dd-btn { opacity: .55; cursor: not-allowed; }
.rf-dd.is-disabled .rf-dd-btn i.bi-chevron-down { opacity: .4; }

.rf-banner-info { background: var(--rf-success-soft); color: var(--rf-ink); }
.rf-banner-warn { background: var(--rf-danger-soft); color: var(--rf-ink); }
.rf-banner .bi { flex: none; margin-top: 0.12rem; }

.rf-loading-card { text-align: center; padding: 3rem 1rem; color: var(--rf-ink-3); }
.rf-loading-card .rf-spinner {
  width: 2.4rem;
  height: 2.4rem;
  margin: 0 auto 0.9rem;
  border-radius: 999px;
  border: 3px solid var(--rf-line-strong);
  border-top-color: var(--rf-brand);
  animation: rf-spin 0.8s linear infinite;
}

@keyframes rf-spin { to { transform: rotate(360deg); } }

.rf-step-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.75rem;
}

.rf-step-footer .rf-btn-primary { min-width: 10rem; }

.rf-footer-note {
  text-align: center;
  color: var(--rf-ink-3);
  font-size: 0.8rem;
  margin-top: 1.5rem;
}

/* ---------- My applications page ---------- */

.rf-app-card { margin-bottom: 1rem; }

.rf-app-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.4rem;
}

.rf-app-title { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.rf-app-team { color: var(--rf-ink-3); font-size: 0.85rem; }

.rf-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.rf-badge .bi { font-size: 0.7rem; }

.rf-badge-pending { background: rgba(255, 193, 7, 0.15); color: #996c00; }
.rf-badge-under_review, .rf-badge-interview_scheduled { background: rgba(13, 110, 253, 0.13); color: #0b5ed7; }
.rf-badge-interview_completed { background: rgba(108, 117, 125, 0.14); color: #586070; }
.rf-badge-accepted { background: var(--rf-success-soft); color: var(--rf-success); }
.rf-badge-rejected, .rf-badge-absent { background: var(--rf-danger-soft); color: var(--rf-danger); }
.rf-badge-withdrawn { background: rgba(108, 117, 125, 0.14); color: var(--rf-ink-3); }

.rf[data-theme="dark"] .rf-badge-pending { color: #ffd166; }
.rf[data-theme="dark"] .rf-badge-under_review,
.rf[data-theme="dark"] .rf-badge-interview_scheduled { color: #8ab0ff; }
.rf[data-theme="dark"] .rf-badge-interview_completed,
.rf[data-theme="dark"] .rf-badge-withdrawn { color: var(--rf-ink-2); }

.rf-app-details {
  display: grid;
  gap: 0.45rem;
  margin: 0.85rem 0;
  font-size: 0.88rem;
}

.rf-app-details .rf-detail { display: flex; align-items: center; gap: 0.55rem; color: var(--rf-ink-2); }
.rf-app-details .bi { color: var(--rf-brand); font-size: 0.9rem; }
.rf-app-details .rf-detail-strong { color: var(--rf-ink); font-weight: 600; }

.rf-app-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.rf-app-actions + .rf-app-actions { margin-top: 0.75rem; }

.rf-empty {
  text-align: center;
  padding: 3.5rem 1.5rem;
}

.rf-empty img { width: 6rem; opacity: 0.9; margin-bottom: 1rem; }
.rf-empty h3 { font-weight: 700; margin: 0 0 0.4rem; }
.rf-empty p { color: var(--rf-ink-2); margin: 0 0 1.5rem; }

/* ---------- Footer ---------- */

.rf-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 1.5rem 1rem 2rem;
  color: var(--rf-ink-3);
  font-size: 0.8rem;
}

.rf-footer a { color: var(--rf-ink-2); text-decoration: none; font-weight: 600; }
.rf-footer a:hover { color: var(--rf-brand); }

/* ---------- Utilities ---------- */

.d-none { display: none !important; }

/* .rf prefix: must outrank `.rf-nav-brand img { display:block }` below the fold —
   the bare class lost that fight and the white logo painted in light mode. */
.rf .rf-logo-white, .rf-wm-dark { display: none; }
.rf[data-theme="dark"] .rf-logo-blue { display: none; }
.rf[data-theme="dark"] .rf-logo-white { display: block; }
.rf[data-theme="dark"] .rf-wm-light { display: none; }
.rf[data-theme="dark"] .rf-wm-dark { display: block; }

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  /* Teams stay TWO-up on phones — single file cards made the page a scroll
     marathon. Compact variant: square-ish cover, tighter type, smaller gap. */
  .rf-teams, .rf-teams-skeleton { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .rf-choices { grid-template-columns: 1fr; }
  .rf-grid-2 { grid-template-columns: 1fr; gap: 0; }

  .rf-team { border-radius: 14px; }
  .rf-team-cover-wrap { aspect-ratio: 5 / 4; }
  .rf-team-body { padding: 0.6rem 0.7rem 0.7rem; gap: 0.1rem; }
  .rf-team-name { font-size: 0.88rem; line-height: 1.25; }
  .rf-team-meta { font-size: 0.7rem; padding-top: 0.35rem; gap: 0.3rem; }
  .rf-team-meta .bi-arrow-right { display: none; }
  .rf-skel[style*="aspect-ratio"] { aspect-ratio: 5 / 4 !important; }

  .rf-rail { padding: 0.75rem 0.5rem; gap: 0.15rem; }
  .rf-rail-label { font-size: 0.62rem; }
  .rf-rail-node { width: 1.7rem; height: 1.7rem; font-size: 0.7rem; }
  .rf-rail-track { top: 0.85rem; left: calc(-50% + 0.95rem); width: calc(100% - 1.9rem); }

  /* Continue/back bar glues to the bottom of the screen while its step is
     taller than the viewport — primary action always in thumb reach. */
  .rf-step-footer {
    flex-direction: column-reverse;
    align-items: stretch;
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 1.75rem calc(-1 * clamp(1.25rem, 4vw, 2rem)) 0;
    padding: 0.75rem clamp(1.25rem, 4vw, 2rem) max(0.9rem, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--rf-surface-solid) 92%, transparent) 45%);
  }

  .rf-card > .rf-step-footer:last-child { margin-bottom: calc(-1 * clamp(1.25rem, 4vw, 2rem)); }
  .rf-step-footer .rf-btn { width: 100%; }
  .rf-btn-back { align-self: flex-start; }

  /* 16px kills the iOS auto-zoom on focus */
  .rf-input, .rf-dd-btn { font-size: 1rem; }

  .rf-photo { flex-direction: column; text-align: center; }
  .rf-photo-actions { align-items: center; }

  .rf-title { font-size: 2.1rem; }

  /* floating pill has room for the wordmark on phones — keep it, just trim */
  .rf-nav { top: 0.5rem; padding: 0.45rem 0.5rem 0.45rem 0.8rem; }
  .rf-nav-brand { font-size: 0.98rem; gap: 0.5rem; }
  .rf-nav-brand img { width: 2rem; height: 2rem; }
  .rf-nav-brand .rf-brand-sub { font-size: 0.54rem; letter-spacing: 0.13em; }
  .rf-nav-actions .rf-btn { padding: 0.45rem 0.85rem; font-size: 0.8rem; }
  .rf-theme-toggle { width: 2.35rem; height: 2.35rem; }

  .rf-app-actions .rf-btn { flex: 1 1 100%; }

  .rf-dates { grid-template-columns: repeat(3, 1fr); }

  .rf-cam-stage { width: min(19rem, 88vw); }
  .rf-cam-mask { background: radial-gradient(circle 8.2rem at center, transparent 96%, rgba(8, 11, 30, 0.72) 97%); }
}

@media (max-width: 380px) {
  .rf-teams, .rf-teams-skeleton { gap: 0.5rem; }
  .rf-team-name { font-size: 0.82rem; }
  .rf-team-meta { font-size: 0.64rem; }
  .rf-dates { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Reduced motion ---------- */

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

/* ---------- Visual review fixes (light = standard) ---------- */

/* Border-box inside the flow: width:100% inputs/textareas were wider than
   their boxes (form overflowed the viewport on mobile, textareas poked out
   of the card on desktop). */
.rf, .rf *, .rf *::before, .rf *::after { box-sizing: border-box; }

/* Camera modal labels vanished in light mode — `.rf button { color: inherit }`
   (0,1,1) outranked the single-class rules below, so the white-on-dark text
   inherited the page ink colour. Re-assert with higher specificity. */
.rf .rf-cam-close { color: rgba(255, 255, 255, 0.85); }
.rf .rf-cam-close:hover { color: #fff; }
.rf .rf-cam-capture { color: #fff; }
.rf .rf-cam-error { color: #ff9aa4; }

/* Native file input (CV) — skin the browser button instead of the raw
   "Choose File" chrome. */
.rf-input[type="file"] { padding-top: 0.55rem; padding-bottom: 0.55rem; font-size: 0.88rem; color: var(--rf-ink-2); cursor: pointer; }
.rf-input[type="file"]::file-selector-button {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--rf-ink-2);
  background: var(--rf-surface-soft);
  border: 1px solid var(--rf-line-strong);
  border-radius: 999px;
  padding: 0.42rem 1rem;
  margin-right: 0.75rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.rf-input[type="file"]::file-selector-button:hover { border-color: var(--rf-brand); color: var(--rf-brand); }

/* Dark theme: the brand→violet gradient goes pastel there, so white button
   labels lose contrast. Deepen the gradient wherever it carries white text
   (matches the .rf-pass-head dark override). */
.rf[data-theme="dark"] .rf-btn-primary,
.rf[data-theme="dark"] .rf-rail-step.is-done .rf-rail-node,
.rf[data-theme="dark"] .rf-check-burst,
.rf[data-theme="dark"] .rf-cam-capture,
.rf[data-theme="dark"] .rf-identity img,
.rf[data-theme="dark"] .rf-identity .rf-avatar-fallback,
.rf[data-theme="dark"] .rf-pass-photo-fallback {
  background: linear-gradient(135deg, #3d53c4, #6b30a8);
}
.rf[data-theme="dark"] .rf-btn-primary { color: #fff; }

/* Empty-state illustration: the full artwork only works on white cards —
   swap to the transparent white robot on dark. */
.rf-empty .rf-empty-dark { display: none; }
.rf[data-theme="dark"] .rf-empty .rf-empty-light { display: none; }
.rf[data-theme="dark"] .rf-empty .rf-empty-dark { display: block; width: 4.2rem; margin: 0 auto 1rem; }

/* Success pass without a photo: the head avatar placeholder + the check
   burst stacked two circles — keep the burst, drop the placeholder. */
.rf-pass.no-photo .rf-pass-photo-fallback { display: none; }
.rf-pass.no-photo .rf-pass-head { padding-bottom: 2.25rem; }

/* The logo artwork is portrait — don't squash it into square boxes. */
.rf-nav-brand img, .rf-watermark { object-fit: contain; }

/* Button labels never wrap (border-box made min-width include padding, which
   let "Submit application" break onto two lines). */
.rf-btn { white-space: nowrap; }

/* ============================================================
   Team page — the interstitial that opens after picking a team.
   Photos + the club's own story, with a sticky apply bar so an
   uninterested recruit skips to the form in one tap.
   ============================================================ */

/* While the team page is open, the picker chrome around it hides */
#step-team.is-about > .rf-head,
#step-team.is-about > #teams-grid,
#step-team.is-about > .rf-footer-note,
#step-team.is-about > .js-back-account,
#step-team.is-about > #quota-banner { display: none; }

.rf-about { display: flex; flex-direction: column; }

.rf-about-card { overflow: hidden; padding: 0; }

/* Hero */
.rf-about-hero {
  position: relative;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(135deg, var(--rf-brand-deep), var(--rf-violet));
}
.rf-about-hero.has-cover #about-cover {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.rf-about-hero.has-cover::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 14, 40, 0) 30%, rgba(10, 14, 40, 0.78));
}
.rf-about-hero-fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 3.4rem; color: rgba(255, 255, 255, 0.35);
}
.rf-about-hero.has-cover .rf-about-hero-fallback { display: none; }
.rf-about-hero-text {
  position: relative; z-index: 1;
  padding: 1.4rem 1.6rem;
  color: #fff;
}
.rf-about-name {
  margin: 0 0 .5rem;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 800; letter-spacing: -0.02em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

/* Quick-fact chips */
.rf-about-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.rf-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .32rem .8rem;
  border-radius: 999px;
  font-size: .78rem; font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.rf-chip.is-link { cursor: pointer; text-decoration: none; transition: background .2s; }
.rf-chip.is-link:hover { background: rgba(255, 255, 255, 0.3); }

/* Body */
.rf-about-body { padding: 1.5rem 1.6rem 1.2rem; }
.rf-about-desc p {
  margin: 0 0 .9rem;
  font-size: .95rem; line-height: 1.75;
  color: var(--rf-ink-2);
}
.rf-about-h {
  display: flex; align-items: center; gap: .5rem;
  margin: 1.6rem 0 .8rem;
  font-size: .95rem; font-weight: 700;
  color: var(--rf-ink);
}
.rf-about-h i { color: var(--rf-brand); }

/* Open roles */
.rf-about-roles { display: grid; gap: .55rem; }
.rf-about-role {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .75rem .95rem;
  border-radius: var(--rf-radius-sm);
  background: var(--rf-surface-soft);
  border: 1px solid var(--rf-line);
}
.rf-about-role-name { font-weight: 700; font-size: .9rem; color: var(--rf-ink); }
.rf-about-role-desc { font-size: .82rem; color: var(--rf-ink-3); line-height: 1.5; }

/* Achievements */
.rf-about-ach { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
.rf-about-ach-card {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--rf-radius-sm);
  background-color: var(--rf-canvas-2);
  background-size: cover; background-position: center;
  border: 1px solid var(--rf-line);
  overflow: hidden;
  display: flex; align-items: flex-end;
  padding: .6rem .7rem;
}
.rf-about-ach-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 14, 40, 0) 45%, rgba(10, 14, 40, 0.72));
}
.rf-about-ach-card > * { position: relative; z-index: 1; }
.rf-about-ach-year {
  position: absolute; top: .55rem; right: .6rem; z-index: 1;
  padding: .12rem .55rem;
  border-radius: 999px;
  font-size: .7rem; font-weight: 700;
  color: #fff; background: rgba(10, 14, 40, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.rf-about-ach-title { font-size: .8rem; font-weight: 700; color: #fff; line-height: 1.4; }

/* Photo strip */
.rf-about-photos {
  display: flex; gap: .7rem;
  overflow-x: auto;
  padding-bottom: .4rem;
  scroll-snap-type: x mandatory;
}
.rf-about-photo {
  flex: 0 0 auto;
  width: 150px; height: 110px;
  border-radius: var(--rf-radius-sm);
  background-size: cover; background-position: center;
  border: 1px solid var(--rf-line);
  scroll-snap-align: start;
  cursor: zoom-in;
  padding: 0;
  transition: transform .25s var(--rf-ease);
}
.rf-about-photo:hover { transform: translateY(-3px); }

.rf-about-site {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: 1.2rem;
  font-size: .85rem; font-weight: 600;
  color: var(--rf-brand) !important;
  text-decoration: none;
}
.rf-about-site:hover { text-decoration: underline; }

/* Sticky apply bar — always on screen while the page is open, so
   "skip everything and apply" is one tap from anywhere */
.rf-about-bar {
  position: sticky; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.6rem;
  background: var(--rf-surface);
  border-top: 1px solid var(--rf-line-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.rf-about-bar-note { font-size: .82rem; color: var(--rf-ink-3); }

@media (max-width: 560px) {
  .rf-about-hero { min-height: 190px; }
  .rf-about-body { padding: 1.2rem 1.1rem 1rem; }
  .rf-about-bar { flex-direction: column-reverse; align-items: stretch; text-align: center; padding: .8rem 1.1rem; }
  .rf-about-photo { width: 128px; height: 96px; }
}

/* ============================================================
   Club explorer — glass modal behind "Browse the club"
   Liquid blobs + frosted glass + scroll-snap team carousel
   ============================================================ */

.rf-browse-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: .55rem; padding: .8rem 1.5rem;
  font: 600 .95rem/1 var(--rf-font);
  color: var(--rf-brand);
  background: color-mix(in srgb, var(--rf-brand) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--rf-brand) 32%, transparent);
  border-radius: 999px;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, background .35s, color .35s;
}
.rf-browse-btn:hover {
  color: #fff;
  background: var(--rf-brand);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--rf-brand) 65%, transparent);
}
.rf-browse-btn:active { transform: translateY(0) scale(.97); }

.rfx-overlay {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(.5rem, 3vw, 2rem);
  visibility: hidden; opacity: 0;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
.rfx-overlay.is-open {
  visibility: visible; opacity: 1;
  transition: opacity .4s ease;
}

.rfx-backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--rf-ink, #0b1220) 55%, transparent);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

/* Liquid blobs — slow morphing orbs floating behind the glass */
.rfx-liquid { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.rfx-blob {
  position: absolute;
  filter: blur(60px);
  opacity: .5;
  animation: rfx-blob-float 18s ease-in-out infinite alternate,
             rfx-blob-morph 9s ease-in-out infinite alternate;
}
.rfx-blob-a {
  width: 42vmax; height: 42vmax; left: -12vmax; top: -14vmax;
  background: radial-gradient(circle at 35% 35%, #2656cc66, #2656cc05 70%);
}
.rfx-blob-b {
  width: 36vmax; height: 36vmax; right: -10vmax; bottom: -12vmax;
  background: radial-gradient(circle at 60% 40%, #7c3aed59, #7c3aed05 70%);
  animation-delay: -6s, -3s;
}
.rfx-blob-c {
  width: 28vmax; height: 28vmax; left: 38%; bottom: -16vmax;
  background: radial-gradient(circle at 50% 50%, #06b6d459, #06b6d405 70%);
  animation-delay: -11s, -5s;
}
@keyframes rfx-blob-float {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(6vmax, 4vmax) scale(1.18); }
}
@keyframes rfx-blob-morph {
  0%   { border-radius: 42% 58% 60% 40% / 55% 45% 55% 45%; }
  100% { border-radius: 60% 40% 42% 58% / 42% 58% 42% 58%; }
}

.rfx-dialog {
  position: relative;
  width: min(1080px, 100%);
  height: min(86vh, 760px);
  display: flex; flex-direction: column;
  overflow: hidden;
  border-radius: 28px;
  background: color-mix(in srgb, var(--rf-surface) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--rf-ink, #0b1220) 12%, transparent);
  backdrop-filter: blur(26px) saturate(1.3);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  box-shadow: 0 40px 90px -30px rgba(2, 8, 20, .55),
              inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
  transform: translateY(26px) scale(.97);
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.rfx-overlay.is-open .rfx-dialog { transform: translateY(0) scale(1); }

.rfx-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.3rem 1.6rem .9rem;
}
.rfx-title {
  display: flex; align-items: center; gap: .6rem;
  margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--rf-ink, #0b1220);
}
.rfx-title-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 14px;
  font-size: 1.15rem; color: #fff;
  background: linear-gradient(135deg, var(--rf-brand), #7c3aed);
  box-shadow: 0 8px 20px -8px var(--rf-brand);
}
.rfx-title::after {
  /* quiet accent underline instead of an icon badge */
  content: '';
  display: block; width: 44px; height: 3px; margin-top: .35rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rf-brand), #7c3aed);
}
.rfx-sub { margin: .45rem 0 0; font-size: .88rem; color: var(--rf-ink-3); }

.rfx-close {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  font-size: 1.05rem; color: var(--rf-ink-2);
  background: color-mix(in srgb, var(--rf-ink, #0b1220) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--rf-ink, #0b1220) 10%, transparent);
  cursor: pointer;
  transition: transform .3s, background .3s, color .3s;
}
.rfx-close:hover { transform: rotate(90deg); background: #e11d48; color: #fff; border-color: #e11d48; }

.rfx-track-wrap { position: relative; flex: 1; min-height: 0; display: flex; }
.rfx-track {
  flex: 1; min-width: 0;
  display: flex; gap: 24px;
  padding: .2rem 3.2rem 1rem;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  outline: none;
}
.rfx-track::-webkit-scrollbar { display: none; }

.rfx-card-team {
  flex: 0 0 min(420px, 86vw);
  height: 100%;
  scroll-snap-align: center;
  display: flex; flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  background: color-mix(in srgb, var(--rf-surface) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--rf-ink, #0b1220) 9%, transparent);
  opacity: 0; transform: translateY(18px);
  animation: rfx-card-in .55s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes rfx-card-in { to { opacity: 1; transform: translateY(0); } }

.rfx-hero { position: relative; flex: 0 0 auto; height: 168px; overflow: hidden; }
.rfx-cover {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.2s cubic-bezier(.22,1,.36,1);
}
.rfx-card-team:hover .rfx-cover { transform: scale(1.12); }
.rfx-cover-fallback {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #101a2e));
}
.rfx-monogram {
  font-size: 2.6rem; font-weight: 800; letter-spacing: .04em;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 4px 24px rgba(0, 0, 0, .35);
}
.rfx-hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 20%, rgba(4, 10, 24, .82) 100%);
}
.rfx-hero-text {
  position: absolute; left: 1.1rem; right: 1.1rem; bottom: .8rem;
  display: flex; align-items: center; gap: .7rem; color: #fff;
}
.rfx-team-icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 15px; font-size: 1.2rem;
  color: #fff;
  background: color-mix(in srgb, var(--accent) 85%, transparent);
  box-shadow: 0 8px 18px -6px var(--accent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.rfx-hero-text h3 { margin: 0; font-size: 1.18rem; font-weight: 800; letter-spacing: -.01em; text-shadow: 0 2px 10px rgba(0,0,0,.45); }
.rfx-hero-text p { margin: .1rem 0 0; font-size: .8rem; opacity: .92; text-shadow: 0 1px 8px rgba(0,0,0,.5); }

.rfx-card-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.15rem 1.2rem;
  scrollbar-width: thin;
}

.rfx-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .8rem; }
.rfx-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .32rem .7rem;
  font-size: .74rem; font-weight: 600;
  color: var(--rf-ink-2);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 999px;
}
.rfx-chip-link { color: var(--accent); text-decoration: none; cursor: pointer; }
.rfx-chip-link:hover { background: var(--accent); color: #fff; }

.rfx-desc {
  position: relative;
  font-size: .88rem; line-height: 1.6;
  color: var(--rf-ink-2);
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: -webkit-line-clamp .4s;
}
.rfx-card-team.is-expanded .rfx-desc { -webkit-line-clamp: unset; }

.rfx-readmore {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .45rem; padding: 0;
  font: 700 .8rem/1 var(--rf-font);
  color: var(--accent);
  background: none; border: none; cursor: pointer;
  transition: gap .3s;
}
.rfx-readmore:hover { gap: .6rem; }

.rfx-subs-title {
  display: flex; align-items: center; gap: .5rem;
  margin: 1.1rem 0 .6rem;
  font-size: .78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--rf-ink-3);
}
.rfx-subs-title .bi { color: var(--accent); }

.rfx-subs { display: flex; flex-direction: column; gap: .55rem; }
.rfx-sub {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .7rem .8rem;
  border-radius: 15px;
  background: color-mix(in srgb, var(--rf-ink, #0b1220) 4%, transparent);
  border: 1px solid transparent;
  opacity: 0; transform: translateY(10px);
  animation: rfx-card-in .5s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: var(--d, 0ms);
  transition: border-color .3s, transform .3s, background .3s;
}
.rfx-sub:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.rfx-sub-icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 12px;
  font-size: .95rem; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.rfx-sub-body h5 { margin: 0 0 .15rem; font-size: .88rem; font-weight: 700; color: var(--rf-ink, #0b1220); }
.rfx-sub-body p { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--rf-ink-3); }

.rfx-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  font-size: 1.1rem; color: var(--rf-ink, #0b1220);
  background: color-mix(in srgb, var(--rf-surface) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--rf-ink, #0b1220) 12%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 22px -10px rgba(2, 8, 20, .4);
  cursor: pointer;
  transition: transform .3s, opacity .3s, background .3s, color .3s;
}
.rfx-nav-prev { left: .8rem; }
.rfx-nav-next { right: .8rem; }
.rfx-nav:hover:not(:disabled) { background: var(--rf-brand); color: #fff; transform: translateY(-50%) scale(1.08); }
.rfx-nav:disabled { opacity: .35; cursor: default; }

.rfx-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1.6rem 1.1rem;
}
.rfx-dots { display: flex; gap: .45rem; }
.rfx-dot {
  width: 8px; height: 8px; padding: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rf-ink, #0b1220) 22%, transparent);
  border: none; cursor: pointer;
  transition: width .35s cubic-bezier(.22,1,.36,1), background .35s;
}
.rfx-dot.is-active { width: 26px; background: var(--rf-brand); }
.rfx-hint { font-size: .75rem; color: var(--rf-ink-3); display: inline-flex; align-items: center; gap: .4rem; }
.rfx-hint kbd {
  padding: .1rem .35rem; border-radius: 6px;
  font: 700 .68rem/1.4 var(--rf-font);
  color: var(--rf-ink-2);
  background: color-mix(in srgb, var(--rf-ink, #0b1220) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--rf-ink, #0b1220) 15%, transparent);
}

.rfx-loading {
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  width: 100%; height: 100%;
  font-size: .9rem; color: var(--rf-ink-3);
}

body.rfx-no-scroll { overflow: hidden; }

/* Dark theme — deepen the glass, lift the veils */
.rf[data-theme="dark"] .rfx-backdrop { background: rgba(3, 8, 18, .62); }
.rf[data-theme="dark"] .rfx-dialog {
  background: color-mix(in srgb, #0d1526 78%, transparent);
  border-color: rgba(255, 255, 255, .09);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8),
              inset 0 1px 0 rgba(255, 255, 255, .06);
}
.rf[data-theme="dark"] .rfx-card-team {
  background: color-mix(in srgb, #101a2e 80%, transparent);
  border-color: rgba(255, 255, 255, .08);
}
.rf[data-theme="dark"] .rfx-sub { background: rgba(255, 255, 255, .045); }
.rf[data-theme="dark"] .rfx-sub:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.rf[data-theme="dark"] .rfx-sub-body h5,
.rf[data-theme="dark"] .rfx-title,
.rf[data-theme="dark"] .rfx-nav { color: #eef2fb; }
.rf[data-theme="dark"] .rfx-close,
.rf[data-theme="dark"] .rfx-chip { color: #c8d2e6; background: color-mix(in srgb, var(--accent) 18%, transparent); }
.rf[data-theme="dark"] .rfx-dot { background: rgba(255, 255, 255, .25); }

@media (max-width: 720px) {
  .rfx-dialog { height: 88vh; border-radius: 22px; }
  .rfx-head { padding: 1rem 1.1rem .6rem; }
  .rfx-sub { flex-direction: row; }
  .rfx-nav { display: none; }
  .rfx-track { padding: .2rem 1rem 1rem; }
  .rfx-foot { padding: .5rem 1.1rem .9rem; }
  .rfx-hint { display: none; }
  .rfx-card-team { flex: 0 0 min(340px, 88vw); }
}

@media (prefers-reduced-motion: reduce) {
  .rfx-blob { animation: none; }
  .rfx-card-team, .rfx-sub { animation-duration: .01s; }
  .rfx-dialog, .rfx-cover, .rfx-nav { transition-duration: .01s; }
}

/* ---- Review fixes ---- */

/* Footer note: vertically centered with the button, readable */
.rf-footer-note:has(.rf-browse-btn) {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .3rem .7rem;
  color: var(--rf-ink-2);
}

/* Card body: soft fade instead of a hard clip at the bottom edge */
.rfx-card-body {
  mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent 100%);
}
.rfx-card-body:is(:hover, :focus-withn),
.rfx-card-team.is-expanded .rfx-card-body { mask-image: none; -webkit-mask-image: none; }

/* Dark mode: lift muted text to AA contrast */
.rf[data-theme="dark"] .rfx-sub,
.rf[data-theme="dark"] .rfx-desc { color: #c3cde0; }
.rf[data-theme="dark"] .rfx-sub-body p,
.rf[data-theme="dark"] .rfx-sub-title,
.rf[data-theme="dark"] .rfx-hint,
.rf[data-theme="dark"] .rfx-sub { color: #aab6cc; }
.rf[data-theme="dark"] .rfx-sub-body p { color: #b7c2d6; }
.rf[data-theme="dark"] .rfx-desc { color: #ccd5e6; }
.rf[data-theme="dark"] .rfx-hint { color: #b7c2d6; }
.rf[data-theme="dark"] .rfx-readmore { color: color-mix(in srgb, var(--accent) 55%, #fff); }
.rf[data-theme="dark"] .rfx-hint kbd { color: #d4dcec; }

/* ---- Placement: browse note lives ABOVE the teams grid ---- */
.rf-browse-note { margin: .2rem 0 1.05rem; }

/* ============================================================
   Team chooser — "read more or apply?" popup on team pick
   ============================================================ */

.rfc-overlay {
  position: fixed; inset: 0; z-index: 1300;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  visibility: hidden; opacity: 0;
  transition: opacity .28s ease, visibility 0s linear .28s;
}
.rfc-overlay.is-open { visibility: visible; opacity: 1; transition: opacity .28s ease; }

.rfc-backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--rf-ink, #0b1220) 42%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.rfc-card {
  position: relative;
  width: min(420px, 92vw);
  padding: 2rem 1.8rem 1.7rem;
  text-align: center;
  border-radius: 24px;
  background: color-mix(in srgb, var(--rf-surface) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--rf-ink, #0b1220) 10%, transparent);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  box-shadow: 0 30px 70px -25px rgba(2, 8, 20, .5);
  transform: translateY(16px) scale(.96);
  transition: transform .38s cubic-bezier(.22,1,.36,1);
}
.rfc-overlay.is-open .rfc-card { transform: translateY(0) scale(1); }

.rfc-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: .8rem;
  font-size: 1.4rem; color: #fff; border-radius: 18px;
  background: linear-gradient(135deg, var(--rf-brand), #7c3aed);
  box-shadow: 0 10px 24px -10px var(--rf-brand);
}
.rfc-title { margin: 0 0 .4rem; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; color: var(--rf-ink, #0b1220); }
.rfc-text { margin: 0 0 1.3rem; font-size: .92rem; line-height: 1.55; color: var(--rf-ink-3); }

.rfc-actions { display: grid; gap: .6rem; }
.rfc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1.2rem;
  font: 700 .95rem/1 var(--rf-font);
  border-radius: 14px; cursor: pointer;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, background .3s, color .3s, border-color .3s;
}
.rfc-btn:active { transform: scale(.97); }
.rfc-btn-apply {
  color: #fff;
  background: linear-gradient(135deg, var(--rf-brand), #7c3aed);
  box-shadow: 0 12px 26px -12px var(--rf-brand);
}
.rfc-btn-apply:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -12px var(--rf-brand); }
.rfc-btn-read {
  color: var(--rf-brand);
  background: color-mix(in srgb, var(--rf-brand) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--rf-brand) 30%, transparent);
}
.rfc-btn-read:hover { background: color-mix(in srgb, var(--rf-brand) 16%, transparent); transform: translateY(-2px); }

.rfc-close {
  position: absolute; top: .8rem; right: .8rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  font-size: .9rem; color: var(--rf-ink-3);
  background: color-mix(in srgb, var(--rf-ink, #0b1220) 6%, transparent);
  border: none; cursor: pointer;
  transition: transform .3s, color .3s, background .3s;
}
.rfc-close:hover { transform: rotate(90deg); color: #e11d48; background: color-mix(in srgb, #e11d48 12%, transparent); }

.rf[data-theme="dark"] .rfc-backdrop { background: rgba(3, 8, 18, .55); }
.rf[data-theme="dark"] .rfc-card {
  background: color-mix(in srgb, #0d1526 85%, transparent);
  border-color: rgba(255, 255, 255, .09);
  box-shadow: 0 30px 70px -25px rgba(0, 0, 0, .75);
}
.rf[data-theme="dark"] .rfc-title { color: #eef2fb; }
.rf[data-theme="dark"] .rfc-text { color: #b7c2d6; }
.rf[data-theme="dark"] .rfc-close { color: #aab6cc; background: rgba(255,255,255,.07); }

@media (max-width: 480px) {
  .rfc-card { padding: 1.6rem 1.2rem 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rfc-overlay, .rfc-card, .rfc-btn, .rfc-close { transition-duration: .01s; }
}