/* ─────────────── Fonts (must be first) ─────────────── */

@import url('https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@400;500;600;700&family=Maven+Pro:wght@400;500;600;700&display=swap');

/* ─────────────── Critical CSS (Prevent FOUC) ─────────────── */

/* Hide radio inputs immediately - prevents flash of native radio buttons */
.rc-role-pill input[type="radio"],
.rc-role-radios input[type="radio"] {
	position: absolute !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	pointer-events: none !important;
}

/* Disable transitions on initial page load - prevents "slide/grow" effect */
.rc-role-pill,
.rc-login-roles .rc-role-pill {
	transition: none;
}

/* Re-enable transitions after page is ready (class added by JS) */
body.rc-ready .rc-role-pill,
body.rc-ready .rc-login-roles .rc-role-pill {
	transition: all var(--rc-transition-fast);
}

body.rc-ready .rc-login-roles .rc-role-pill {
	transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

/* ─────────────── Modal Body Lock ─────────────── */

body.rc-modal-lock {
	overflow: hidden;
}

/* ─────────────── CSS Custom Properties ─────────────── */

:root {
	/* ═══════════════════════════════════════════════════════
	   PRIMITIVE COLORS (Base Palette)
	   ═══════════════════════════════════════════════════════ */

	/* Yellows (Legacy - used only for pricing/unlock UI) */
	--rc-color-yellow-400: #f7d47a;
	--rc-color-yellow-500: #E8B138;
	--rc-color-yellow-600: #BA8E2C;

	/* Blues (Consolidated 4→2) */
	--rc-color-blue-800: #09506F;
	--rc-color-blue-900: #062837;

	/* Indigos */
	--rc-color-indigo-600: #4f46e5;
	--rc-color-indigo-700: #4338ca;
	--rc-color-indigo-500: #2563eb;
	--rc-color-indigo-800: #1d4ed8;

	/* Grays (Consolidated 7→5) */
	--rc-color-gray-100: #E6EEF0;
	--rc-color-gray-300: #c2c8d0;
	--rc-color-gray-400: #8BA9B6;
	--rc-color-gray-450: rgba(6, 40, 55, 0.25);
	--rc-color-gray-500: #6b7280;
	--rc-color-gray-600: #3c434a;

	/* Greens (Consolidated 10→5) */
	--rc-color-green-100: #dcfce7;
	--rc-color-green-300: #b7e1c0;
	--rc-color-green-500: #10b981;
	--rc-color-green-600: #047857;
	--rc-color-green-700: #007017;

	/* Reds (Consolidated 10→5) */
	--rc-color-red-100: #ffe9e9;
	--rc-color-red-300: #fecaca;
	--rc-color-red-500: #ef4444;
	--rc-color-red-600: #e15555;
	--rc-color-red-700: #991b1b;

	/* Match Blues (Consolidated 4→3) */
	--rc-color-match-200: #eef3ff;
	--rc-color-match-300: #d4def0;
	--rc-color-match-500: #7ca0d2;

	/* Tints (Consolidated 5→2) */
	--rc-color-tint-section: #fcfcfd;
	--rc-color-tint-status: #eef2f7;

	/* Status Yellows (Legacy - used only for pricing/unlock UI) */
	--rc-color-status-yellow-50: #fffbe5;
	--rc-color-status-yellow-700: #936f00;
	--rc-color-status-yellow-300: #f0e19a;

	/* Status Greens */
	--rc-color-status-green-100: #edfaef;

	/* Section Border Colors (Used in edit modals for visual distinction) */
	--rc-color-section-sky-blue: #0ea5e9;
	--rc-color-section-purple: #7c3aed;
	--rc-color-section-green: #10b981;
	--rc-color-section-dark-blue: #062837;
	--rc-color-section-indigo: #4f46e5;
	--rc-color-section-pink: #ec4899;

	/* Match Tier Colors (Used for candidate cards and modals) */
	--rc-color-tier-bronze-light: #faf6f3;
	--rc-color-tier-bronze-dark: #f5ece4;
	--rc-color-tier-bronze-border: #d4c0ab;
	--rc-color-tier-bronze-ring: #8b5a3c;
	--rc-color-tier-bronze-text: #7a4b22;
	--rc-color-tier-bronze-chip-start: #c9936a;
	--rc-color-tier-bronze-chip-end: #a87552;
	--rc-color-tier-silver-light: #f8f9fb;
	--rc-color-tier-silver-dark: #f2f4f8;
	--rc-color-tier-silver-border: #dde3ed;
	--rc-color-tier-silver-ring: #9ca8bc;
	--rc-color-tier-silver-text: #26354f;
	--rc-color-tier-silver-chip-start: #e8edf5;
	--rc-color-tier-silver-chip-end: #d8e0ec;
	--rc-color-tier-gold-light: #faf8f3;
	--rc-color-tier-gold-dark: #f7f0e3;
	--rc-color-tier-gold-border: #dccfad;
	--rc-color-tier-gold-ring: #9d7e3a;
	--rc-color-tier-gold-text: #6b5a1c;
	--rc-color-tier-gold-chip-start: #d4b56f;
	--rc-color-tier-gold-chip-end: #b89750;
	/* Platinum/Diamond Tier (Darker Blue Update) */
	--rc-color-tier-perfect-light: #f0f9ff;
	--rc-color-tier-perfect-dark: #e0f2fe;
	--rc-color-tier-perfect-border: #0ea5e9;
	--rc-color-tier-perfect-ring: #0284c7;
	--rc-color-tier-perfect-text: #0c4a6e;
	--rc-color-tier-perfect-chip-start: #e0f2fe;
	--rc-color-tier-perfect-chip-end: #bae6fd;

	/* Neutrals */
	--rc-color-white: #ffffff;

	/* ═══════════════════════════════════════════════════════
	   BRAND COLORS
	   ═══════════════════════════════════════════════════════ */

	/* Primary (Blue - was Yellow) */
	--rc-primary: var(--rc-color-blue-900);
	--rc-primary-hover: var(--rc-color-blue-800);
	--rc-primary-gradient-start: var(--rc-color-blue-800);

	/* Secondary (Blue) */
	--rc-secondary: var(--rc-color-blue-900);
	--rc-secondary-hover: var(--rc-color-blue-800);

	/* Overlay */
	--rc-banner-overlay: #06283773;

	/* ═══════════════════════════════════════════════════════
	   SEMANTIC COLORS
	   ═══════════════════════════════════════════════════════ */

	/* Success (Green) */
	--rc-success-bg-light: var(--rc-color-green-100);
	--rc-success-bg: var(--rc-color-green-100);
	--rc-success-border: var(--rc-color-green-300);
	--rc-success-text: var(--rc-color-green-700);
	--rc-success-text-strong: var(--rc-color-green-700);

	/* Error (Red) */
	--rc-error-bg-light: var(--rc-color-red-100);
	--rc-error-bg: var(--rc-color-red-100);
	--rc-error-border: var(--rc-color-red-300);
	--rc-error-border-strong: var(--rc-color-red-600);
	--rc-error-text: var(--rc-color-red-700);
	--rc-error-text-strong: var(--rc-color-red-700);

	/* Error - Modal Variant */
	--rc-modal-error-bg: var(--rc-color-red-100);
	--rc-modal-error-border: var(--rc-color-red-300);
	--rc-modal-error-text: var(--rc-color-red-700);

	/* Status Pills */
	--rc-status-success-bg: var(--rc-color-status-green-100);
	--rc-status-success-text: var(--rc-color-green-700);
	--rc-status-success-border: var(--rc-color-green-300);
	--rc-status-warning-bg: var(--rc-color-status-yellow-50);
	--rc-status-warning-text: var(--rc-color-status-yellow-700);
	--rc-status-warning-border: var(--rc-color-status-yellow-300);
	--rc-status-inactive-text: var(--rc-color-gray-600);

	/* Badges */
	--rc-badge-success-bg: var(--rc-color-green-500);
	--rc-badge-error-bg: var(--rc-color-red-500);

	/* Modal Buttons (Jobseeker) */
	--rc-modal-btn-primary-bg: var(--rc-color-blue-900);
	--rc-modal-btn-primary-hover: var(--rc-color-blue-800);
	--rc-modal-btn-info-bg: var(--rc-color-indigo-500);
	--rc-modal-btn-info-hover: var(--rc-color-indigo-800);
	--rc-modal-btn-cancel-bg: var(--rc-color-gray-100);

	/* Section Tints (Modal Fieldsets) */
	--rc-section-tint-role: var(--rc-color-tint-section);
	--rc-section-tint-location: var(--rc-color-tint-section);
	--rc-section-tint-social: var(--rc-color-tint-section);
	--rc-section-tint-assets: var(--rc-color-tint-section);
	--rc-section-border-role: var(--rc-color-yellow-500);
	--rc-section-border-location: var(--rc-color-blue-800);
	--rc-section-border-social: var(--rc-color-gray-500);
	--rc-section-border-assets: var(--rc-color-green-500);

	/* Matches Page Colors */
	--rc-match-border: var(--rc-color-match-300);
	--rc-match-border-hover: var(--rc-color-match-500);
	--rc-match-bg-start: var(--rc-color-match-200);
	--rc-match-bg-end: var(--rc-color-match-200);
	--rc-match-shadow-color: rgba(124, 160, 210, 0.18);
	--rc-match-shadow-hover: rgba(124, 160, 210, 0.25);
	--rc-unlocked-text: var(--rc-color-green-600);
	--rc-unlocked-bg: var(--rc-color-green-100);

	/* Link Colors */
	--rc-link-primary: var(--rc-color-blue-900);
	--rc-link-primary-hover: var(--rc-color-indigo-800);

	/* Status Item */
	--rc-status-item-bg: var(--rc-color-tint-status);

	/* White (explicit) */
	--rc-white: var(--rc-color-white);

	/* ═══════════════════════════════════════════════════════
	   NEUTRAL COLORS
	   ═══════════════════════════════════════════════════════ */

	/* Text Colors */
	--rc-ink: var(--rc-color-blue-900);
	--rc-body: var(--rc-color-blue-900);
	--rc-muted: var(--rc-color-gray-500);

	/* Backgrounds */
	--rc-card-bg: #ffffff;
	--rc-bg-light: var(--rc-color-gray-100);
	--rc-bg-page: #E6EEF0;

	/* Card Gradient Utility (Deprecated - kept for fallback or specific uses) */
	--rc-card-gradient-start: rgba(255, 255, 255, 1);
	--rc-card-gradient-end: rgba(255, 255, 255, 1);

	/* Card Shadows (Clean realcruits.com style) */
	--rc-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
	--rc-card-shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);

	/* Borders */
	--rc-border: 1px solid var(--rc-color-gray-450);
	--rc-border-light: 1px solid var(--rc-color-gray-300);

	/* Dividers */
	--rc-divider: var(--rc-color-gray-400);

	/* Cropper */
	--rc-crop-canvas-bg: #f8fafc;
	--rc-crop-canvas-size: 200px;
	--rc-crop-canvas-border: var(--rc-color-blue-900);
	--rc-crop-bg: linear-gradient(135deg, #e6eef0 0%, #d4e3e7 100%);
	--rc-crop-border: var(--rc-color-blue-900);
	--rc-crop-hint-bg: #e6eef0;
	--rc-crop-hint-border: var(--rc-color-blue-800);
	--rc-crop-hint-text: var(--rc-color-blue-900);

	/* Cropper Sizing Tokens */
	--rc-crop-thumb-size: 18px;
	--rc-crop-thumb-border: 2px;
	--rc-crop-slider-width: 240px;
	--rc-crop-slider-height: 6px;

	/* Chip Tokens */
	--rc-chip-bg: #dee6e9;
	--rc-chip-bg-alt: #d4dde1;
	--rc-chip-bg-light: #edf3f5;
	--rc-chip-border: 1px solid rgba(6, 40, 55, 0.35);
	--rc-chip-border-strong: 1px solid rgba(6, 40, 55, 0.45);
	--rc-chip-radius: var(--rc-radius-full);
	--rc-chip-padding: 6px 14px;
	--rc-chip-padding-relaxed: 7px 16px;
	--rc-chip-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
	--rc-chip-font-size: var(--rc-text-sm);
	--rc-chip-font-weight: 500;

	/* Admin Card Background Colors (VS-2) */
	--rc-card-bg-warning: #fef3e2;
	--rc-card-bg-info: #f3e8ff;
	--rc-card-bg-success: #dcfce7;
	--rc-card-bg-accent: #e0f2fe;

	/* ═══════════════════════════════════════════════════════
	   BUTTON TOKENS (Unified System)
	   ═══════════════════════════════════════════════════════ */

	/* Button Sizing */
	--rc-btn-padding-sm: 10px 20px;
	--rc-btn-padding-md: 12px 24px;
	--rc-btn-padding-lg: 14px 32px;
	--rc-btn-padding-compact: 6px 16px;
	--rc-btn-height-sm: 38px;
	--rc-btn-height-md: 42px;
	--rc-btn-height-lg: 46px;

	/* Button Border Radius */
	--rc-btn-radius: 999px;
	/* Pill shape */
	--rc-btn-radius-compact: var(--rc-radius-sm);

	/* Button Typography */
	--rc-btn-font-size-sm: 13px;
	--rc-btn-font-size-md: 14px;
	--rc-btn-font-size-lg: 16px;
	--rc-btn-font-weight: var(--rc-font-weight-semibold);
	--rc-btn-line-height: var(--rc-leading-snug);

	/* Primary Button (Dark Blue) */
	--rc-btn-primary-bg: var(--rc-secondary);
	--rc-btn-primary-bg-hover: #0a5c7d;
	--rc-btn-primary-text: var(--rc-white);
	--rc-btn-primary-border: var(--rc-secondary);
	--rc-btn-primary-border-hover: #0a5c7d;

	/* Secondary Button (White w/ Blue Border) */
	--rc-btn-secondary-bg: var(--rc-white);
	--rc-btn-secondary-bg-hover: var(--rc-secondary);
	--rc-btn-secondary-text: var(--rc-secondary);
	--rc-btn-secondary-text-hover: var(--rc-white);
	--rc-btn-secondary-border: var(--rc-secondary);

	/* Tertiary/Info Button (Sky Blue) */
	--rc-btn-info-bg: #0ea5e9;
	--rc-btn-info-bg-hover: #0284c7;
	--rc-btn-info-text: var(--rc-white);
	--rc-btn-info-border: #0ea5e9;
	--rc-btn-info-border-hover: #0284c7;

	/* Danger Button (Red) */
	--rc-btn-danger-bg: var(--rc-color-red-500);
	--rc-btn-danger-bg-hover: var(--rc-color-red-600);
	--rc-btn-danger-text: var(--rc-white);
	--rc-btn-danger-border: var(--rc-color-red-500);

	/* Button Shadows */
	--rc-btn-shadow: var(--rc-shadow-sm);
	--rc-btn-shadow-hover: 0 2px 4px rgba(6, 40, 55, 0.15);
	--rc-btn-shadow-active: var(--rc-shadow-sm);

	/* Button Transitions */
	--rc-btn-transition: all 0.2s ease;

	/* Gray Scale */
	--rc-gray-100: var(--rc-color-gray-100);
	--rc-gray-300: var(--rc-color-gray-300);
	--rc-gray-400: var(--rc-color-gray-400);
	--rc-gray-450: var(--rc-color-gray-450);
	--rc-gray-500: var(--rc-color-gray-500);
	--rc-gray-600: var(--rc-color-gray-600);
	--rc-gray-800: var(--rc-color-blue-800);
	--rc-gray-900: var(--rc-color-blue-900);

	/* ═══════════════════════════════════════════════════════
	   SPACING (12 tokens)
	   ═══════════════════════════════════════════════════════ */

	--rc-space-4: 4px;
	--rc-space-6: 6px;
	--rc-space-8: 8px;
	--rc-space-10: 10px;
	--rc-space-12: 12px;
	--rc-space-16: 16px;
	--rc-space-20: 20px;
	--rc-space-24: 24px;
	--rc-space-32: 32px;
	--rc-space-36: 36px;
	--rc-space-40: 40px;
	--rc-space-48: 48px;
	--rc-space-80: 80px;

	/* ═══════════════════════════════════════════════════════
	   TYPOGRAPHY
	   ═══════════════════════════════════════════════════════ */

	/* Font Sizes */
	--rc-text-xxs: 11px;
	--rc-text-xs: 12px;
	--rc-text-sm: 13px;
	--rc-text-base: 14px;
	--rc-text-md: 16px;
	--rc-text-lg: 18px;
	--rc-text-xl: 20px;
	--rc-text-2xl: 22px;
	--rc-text-3xl: 26px;

	/* Letter Spacing */
	--rc-letter-spacing-tight: 0.3px;
	--rc-letter-spacing-base: 0.5px;
	--rc-tracking-tight: 1px;
	--rc-tracking-wide: 1.2px;

	/* Font Families */
	--rc-font-body: 'Maven Pro', sans-serif;
	--rc-font-heading: 'Encode Sans Expanded', sans-serif;
	--rc-font-primary: var(--rc-font-body);
	--rc-font-secondary: var(--rc-font-heading);

	/* Font Weights */
	--rc-font-weight-regular: 400;
	--rc-font-weight-medium: 500;
	--rc-font-weight-semibold: 600;
	--rc-font-weight-bold: 700;
	--rc-font-weight-black: 800;

	/* Line Heights (Leading) */
	--rc-leading-none: 1;
	--rc-leading-tight: 1.2;
	--rc-leading-snug: 1.35;
	--rc-leading-normal: 1.5;
	--rc-leading-normal: 1.5;
	--rc-leading-relaxed: 1.6;
	--rc-leading-23: 23px;

	/* ═══════════════════════════════════════════════════════
	   TYPOGRAPHY SYSTEM (Standardized)
	   ═══════════════════════════════════════════════════════ */

	/* 1. Header Tokens */

	/* Header 1 (Page Titles) - 26px Bold */
	--rc-typo-h1-size: var(--rc-text-3xl);
	--rc-typo-h1-weight: var(--rc-font-weight-bold);
	--rc-typo-h1-height: var(--rc-leading-tight);
	--rc-typo-h1-family: var(--rc-font-heading);
	--rc-typo-h1-spacing: var(--rc-letter-spacing-tight);

	/* Header 2 (Section Titles / Names) - 22px Bold */
	--rc-typo-h2-size: var(--rc-text-2xl);
	--rc-typo-h2-weight: var(--rc-font-weight-bold);
	--rc-typo-h2-height: var(--rc-leading-tight);
	--rc-typo-h2-family: var(--rc-font-heading);
	--rc-typo-h2-spacing: var(--rc-letter-spacing-tight);

	/* Header 3 (Card Titles) - 18px Bold */
	--rc-typo-h3-size: var(--rc-text-lg);
	--rc-typo-h3-weight: var(--rc-font-weight-bold);
	--rc-typo-h3-height: var(--rc-leading-tight);
	--rc-typo-h3-family: var(--rc-font-heading);
	--rc-typo-h3-spacing: var(--rc-letter-spacing-tight);

	/* 2. Text Tokens */

	/* Field Label - 16px Semibold */
	--rc-typo-label-size: var(--rc-text-md);
	--rc-typo-label-weight: var(--rc-font-weight-semibold);
	--rc-typo-label-height: normal;
	--rc-typo-label-family: var(--rc-font-primary);
	--rc-typo-label-color: var(--rc-secondary);

	/* Body Text - 14px Regular */
	--rc-typo-body-size: var(--rc-text-base);
	--rc-typo-body-weight: var(--rc-font-weight-regular);
	--rc-typo-body-height: var(--rc-leading-normal);
	--rc-typo-body-family: var(--rc-font-primary);
	--rc-typo-body-color: var(--rc-gray-600);
	/* Slate 600 */

	/* Small Text - 13px Regular */
	--rc-typo-small-size: var(--rc-text-sm);
	--rc-typo-small-weight: var(--rc-font-weight-regular);
	--rc-typo-small-height: var(--rc-leading-snug);
	--rc-typo-small-family: var(--rc-font-primary);
	--rc-typo-small-color: var(--rc-gray-500);

	/* Legacy mapping for backwards compatibility during migration */
	--rc-typo-header-2-family: var(--rc-typo-h2-family);
	--rc-typo-header-2-size: var(--rc-typo-h2-size);
	--rc-typo-header-2-weight: var(--rc-typo-h2-weight);
	--rc-typo-header-2-line-height: var(--rc-typo-h2-height);
	--rc-typo-header-2-spacing: var(--rc-typo-h2-spacing);

	--rc-typo-header-3-family: var(--rc-typo-h3-family);
	--rc-typo-header-3-size: var(--rc-typo-h3-size);
	--rc-typo-header-3-weight: var(--rc-typo-h3-weight);
	--rc-typo-header-3-line-height: var(--rc-typo-h3-height);
	--rc-typo-header-3-spacing: var(--rc-typo-h3-spacing);

	--rc-typo-label-1-family: var(--rc-typo-label-family);
	--rc-typo-label-1-size: var(--rc-typo-label-size);
	--rc-typo-label-1-weight: var(--rc-typo-label-weight);
	--rc-typo-label-1-line-height: var(--rc-typo-label-height);
	--rc-typo-label-1-color: var(--rc-typo-label-color);

	--rc-typo-text-2-family: var(--rc-typo-body-family);
	--rc-typo-text-2-size: var(--rc-typo-body-size);
	--rc-typo-text-2-weight: var(--rc-typo-body-weight);
	--rc-typo-text-2-line-height: var(--rc-typo-body-height);
	--rc-typo-text-2-color: var(--rc-typo-body-color);

	/* 3. Utility Classes (Maps tokens to classes) */

	/* Headings */
	.rc-typo-h1 {
		font-family: var(--rc-typo-h1-family);
		font-size: var(--rc-typo-h1-size);
		font-weight: var(--rc-typo-h1-weight);
		line-height: var(--rc-typo-h1-height);
		letter-spacing: var(--rc-typo-h1-spacing);
		color: var(--rc-ink);
	}

	.rc-typo-h2 {
		font-family: var(--rc-typo-h2-family);
		font-size: var(--rc-typo-h2-size);
		font-weight: var(--rc-typo-h2-weight);
		line-height: var(--rc-typo-h2-height);
		letter-spacing: var(--rc-typo-h2-spacing);
		color: var(--rc-ink);
	}

	.rc-typo-h3 {
		font-family: var(--rc-typo-h3-family);
		font-size: var(--rc-typo-h3-size);
		font-weight: var(--rc-typo-h3-weight);
		line-height: var(--rc-typo-h3-height);
		letter-spacing: var(--rc-typo-h3-spacing);
		color: var(--rc-ink);
	}

	/* Text Styles */
	.rc-typo-label {
		display: block;
		font-family: var(--rc-typo-label-family);
		font-size: var(--rc-typo-label-size);
		font-weight: var(--rc-typo-label-weight);
		line-height: var(--rc-typo-label-height);
		color: var(--rc-typo-label-color);
	}

	.rc-typo-body {
		font-family: var(--rc-typo-body-family);
		font-size: var(--rc-typo-body-size);
		font-weight: var(--rc-typo-body-weight);
		line-height: var(--rc-typo-body-height);
		color: var(--rc-typo-body-color);
	}

	.rc-typo-small {
		font-family: var(--rc-typo-small-family);
		font-size: var(--rc-typo-small-size);
		font-weight: var(--rc-typo-small-weight);
		line-height: var(--rc-typo-small-height);
		color: var(--rc-typo-small-color);
	}



	/* ═══════════════════════════════════════════════════════
	   BORDERS AND SEPARATORS
	   ═══════════════════════════════════════════════════════ */
	--rc-border-separator-dotted: 1px solid var(--rc-gray-300);

	/* ═══════════════════════════════════════════════════════
	   BORDER RADIUS
	   ═══════════════════════════════════════════════════════ */

	--rc-radius-sm: 8px;
	--rc-radius-md: 12px;
	--rc-radius-lg: 16px;
	--rc-radius-xl: 14px;
	--rc-radius-full: 999px;

	/* ═══════════════════════════════════════════════════════
	   SHADOWS (15 tokens)
	   ═══════════════════════════════════════════════════════ */

	/* Elevation Shadows */
	--rc-shadow-sm: 0 1px 2px rgba(6, 40, 55, 0.05);
	--rc-shadow-md: 0 4px 6px rgba(6, 40, 55, 0.07);
	--rc-shadow-dropdown: 0 10px 26px -6px rgba(6, 40, 55, 0.12);
	--rc-shadow-modal: 0 12px 40px -8px rgba(6, 40, 55, 0.35);

	/* Focus Rings */
	--rc-shadow-focus: 0 0 0 3px rgba(6, 40, 55, 0.15);
	--rc-shadow-focus-sm: 0 0 0 2px rgba(6, 40, 55, 0.15);
	--rc-shadow-focus-error: 0 0 0 3px rgba(225, 85, 85, 0.25);

	/* Button Shadows */
	--rc-shadow-btn-hover: 0 2px 4px rgba(6, 40, 55, 0.15);

	/* Semantic Shadows */
	--rc-shadow-success: 0 2px 8px rgba(34, 197, 94, 0.1);

	/* Avatar & Card Shadows */
	--rc-shadow-avatar: 0 4px 12px rgba(0, 0, 0, 0.1);
	--rc-shadow-avatar-sm: 0 2px 6px rgba(0, 0, 0, 0.08);

	/* Match Card Shadows (Blue-tinted) */
	--rc-shadow-match-card: 0 2px 8px rgba(0, 0, 0, 0.06),
	0 1px 3px rgba(0, 0, 0, 0.04),
	0 0 14px rgba(124, 160, 210, 0.18);
	--rc-shadow-match-hover: 0 8px 24px rgba(0, 0, 0, 0.12),
	0 2px 6px rgba(0, 0, 0, 0.06),
	0 0 18px rgba(124, 160, 210, 0.25);
	--rc-shadow-match-logo: 0 4px 12px rgba(124, 160, 210, 0.2);
	--rc-shadow-chip-subtle: 0 1px 2px rgba(10, 37, 64, 0.04);

	/* ═══════════════════════════════════════════════════════
	   SIZING
	   ═══════════════════════════════════════════════════════ */

	/* Component Sizing */
	--rc-input-height: 46px;
	--rc-textarea-min-height: 60px;
	--rc-dropdown-max-height: 260px;
	--rc-phone-cc-width: 86px;

	/* Container Max Widths */
	--rc-container-max-width: 1200px;
	--rc-max-w-sm: 780px;
	--rc-max-w-md: 1024px;
	--rc-max-w-lg: 1080px;

	/* Avatar Sizes */
	--rc-avatar-sm: 60px;
	--rc-avatar-md: 100px;
	--rc-avatar-lg: 120px;
	--rc-avatar-xl: 100px;
	--rc-avatar-2xl: 120px;
	--rc-avatar-3xl: 180px;
	--rc-avatar-4xl: 200px;
	--rc-avatar-5xl: 240px;

	/* Avatar Styling Tokens */
	--rc-avatar-border-width: 3px;
	--rc-avatar-border-color: rgba(139, 169, 182, 0.3);
	--rc-avatar-shadow: 0 4px 16px rgba(6, 40, 55, 0.12),
	0 2px 6px rgba(6, 40, 55, 0.08),
	0 0 0 1px rgba(139, 169, 182, 0.15);

	/* Icon/Emoji Sizes */
	--rc-emoji-lg: 28px;
	--rc-emoji-xl: 32px;
	--rc-emoji-2xl: 48px;

	/* Grid Column Constraints */
	--rc-grid-col-min: 260px;
	--rc-grid-col-max: 340px;
	--rc-phone-cc-width-alt: 140px;

	/* ═══════════════════════════════════════════════════════
	   TRANSITIONS
	   ═══════════════════════════════════════════════════════ */

	--rc-transition-fast: 0.15s;
	--rc-transition-base: 0.2s;
	--rc-transition-slow: 0.3s;

	/* ═══════════════════════════════════════════════════════
	   Z-INDEX LAYERS
	   ═══════════════════════════════════════════════════════ */

	--rc-z-tooltip: 1000;
	--rc-z-dropdown: 1000;
	--rc-z-modal: 9999;

	/* ═══════════════════════════════════════════════════════
	   ADMIN-SPECIFIC COLORS
	   ═══════════════════════════════════════════════════════ */

	--rc-admin-danger: #d63638;
	--rc-admin-warning-bg: #fcf8e3;
	--rc-admin-warning-border: #f0ad4e;
	--rc-admin-success-bg: #d4edda;
	--rc-admin-success-border: #28a745;
	--rc-admin-code-bg: #f0f0f1;
	--rc-admin-muted: #666;

	/* ═══════════════════════════════════════════════════════
	   BREAKPOINTS
	   ═══════════════════════════════════════════════════════ */

	--rc-breakpoint-mobile: 560px;
	--rc-breakpoint-tablet: 768px;
	--rc-breakpoint-desktop: 1024px;
}

/* ─────────────── Global Font System ─────────────── */

/* Body: Maven Pro for all text */
html,
body {
	font-family: var(--rc-font-primary);
	background-color: var(--rc-bg-page) !important;
	min-height: 100vh;
}

/* Headings: Encode Sans Expanded */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--rc-font-heading);
	color: var(--rc-ink);
}

/* Header-like Elements: Encode Sans Expanded */
.rc-modal-title,
.rc-sec-title,
.rc-page-title,
.rc-card-title,
.rc-section-title {
	font-family: var(--rc-font-heading);
	color: var(--rc-ink);
}

/* Global Link Standards */
.realcruits-page a:not([class]),
.rc-card a:not([class]) {
	color: var(--rc-link-primary);
	text-decoration: none;
	font-weight: var(--rc-font-weight-medium);
	/* 500 */
	transition: color 0.2s ease;
}

@media (hover: hover) {

	.realcruits-page a:not([class]):hover,
	.rc-card a:not([class]):hover {
		text-decoration: underline;
		color: var(--rc-link-primary-hover);
	}
}

/* ─────────────── Page Container ─────────────── */

.realcruits-page {
	max-width: 1200px;
	margin: 0 auto;
	background: transparent;
	padding: var(--rc-space-48) var(--rc-space-24);
	border: 0;
	border-radius: 0;
}

.rc-card {
	background: var(--rc-card-bg);
	border: 2px solid var(--rc-border);
	border-radius: var(--rc-radius-lg);
	padding: var(--rc-space-40);
	box-shadow: var(--rc-card-shadow);
}

@media (max-width: 767px) {
	.rc-card {
		padding: var(--rc-space-16);
	}
}

/* ─────────────── Form & Widget Styles Moved to fields.css ─────────────── */
/* All form inputs, selects, multi-select widgets, tags, checkboxes, phone groups, and cropper UI now in fields.css */

/* ═══════════════════════════════════════════════════════
   BUTTON SYSTEM (Token-Based, Single Source of Truth)
   ═══════════════════════════════════════════════════════ */

/* Button Foundation - Shared by All Variants */
.realcruits-btn-primary,
.realcruits-btn-secondary,
.rc-btn-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
	text-align: center;
	cursor: pointer;
	border: 1px solid transparent;
	box-shadow: var(--rc-btn-shadow);
	transition: var(--rc-btn-transition);
	line-height: var(--rc-btn-line-height);
	font-weight: var(--rc-btn-font-weight);
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
}

/* Button Sizes - Default Small */
.realcruits-btn-primary,
.realcruits-btn-secondary {
	padding: var(--rc-btn-padding-sm);
	border-radius: var(--rc-btn-radius);
	font-size: var(--rc-btn-font-size-sm);
}

/* Large Size Modifier */
.realcruits-btn-primary.rc-btn--lg,
.realcruits-btn-secondary.rc-btn--lg {
	padding: var(--rc-btn-padding-lg);
	font-size: var(--rc-btn-font-size-lg);
}

/* Compact Pill Variant */
.rc-btn-pill {
	padding: var(--rc-btn-padding-compact);
	border-radius: var(--rc-btn-radius);
	font-size: var(--rc-text-xs);
}

/* Primary Button (Dark Blue) */
.realcruits-btn-primary,
.rc-btn-pill {
	background: var(--rc-btn-primary-bg);
	color: var(--rc-btn-primary-text);
	-webkit-text-fill-color: var(--rc-btn-primary-text);
	border-color: var(--rc-btn-primary-border);
}

@media (hover: hover) {

	.realcruits-btn-primary:hover,
	.rc-btn-pill:hover {
		background: var(--rc-btn-primary-bg-hover);
		border-color: var(--rc-btn-primary-border-hover);
		color: var(--rc-btn-primary-text);
		box-shadow: var(--rc-btn-shadow-hover);
		transform: translateY(-1px);
		text-decoration: none !important;
	}
}

.realcruits-btn-primary:active,
.rc-btn-pill:active {
	transform: translateY(0);
	box-shadow: var(--rc-btn-shadow-active);
	text-decoration: none !important;
	color: var(--rc-btn-primary-text) !important;
	-webkit-text-fill-color: var(--rc-btn-primary-text);
	background: var(--rc-btn-primary-bg);
}

/* Ensure visited links styled as buttons keep correct colors */
.realcruits-btn-primary:visited,
.rc-btn-pill:visited {
	color: var(--rc-btn-primary-text) !important;
	-webkit-text-fill-color: var(--rc-btn-primary-text);
	background: var(--rc-btn-primary-bg);
}

.realcruits-btn-primary:focus,
.rc-btn-pill:focus {
	text-decoration: none !important;
}

.realcruits-btn-primary:focus-visible,
.rc-btn-pill:focus-visible {
	outline: 2px solid var(--rc-primary);
	outline-offset: 2px;
	text-decoration: none !important;
}

/* Secondary Button (White w/ Blue Border) */
.realcruits-btn-secondary {
	background: var(--rc-btn-secondary-bg);
	color: var(--rc-btn-secondary-text);
	-webkit-text-fill-color: var(--rc-btn-secondary-text);
	border-color: var(--rc-btn-secondary-border);
	border-width: 2px;
}

@media (hover: hover) {
	.realcruits-btn-secondary:hover {
		background: var(--rc-btn-secondary-bg-hover);
		border-color: var(--rc-btn-secondary-border);
		color: var(--rc-btn-secondary-text-hover);
		-webkit-text-fill-color: var(--rc-btn-secondary-text-hover);
		box-shadow: var(--rc-btn-shadow-hover);
		transform: translateY(-1px);
		text-decoration: none !important;
	}

	/* Wizard step navigation: ensure Back/Previous stays readable on hover */
	.rc-nav .realcruits-btn-secondary:hover {
		color: var(--rc-btn-primary-text) !important;
		-webkit-text-fill-color: var(--rc-btn-primary-text);
	}
}

.realcruits-btn-secondary:active {
	transform: translateY(0);
	box-shadow: var(--rc-btn-shadow-active);
	text-decoration: none !important;
	color: var(--rc-btn-secondary-text) !important;
	-webkit-text-fill-color: var(--rc-btn-secondary-text);
}

.realcruits-btn-secondary:visited {
	color: var(--rc-btn-secondary-text) !important;
	-webkit-text-fill-color: var(--rc-btn-secondary-text);
}

.realcruits-btn-secondary:focus {
	text-decoration: none !important;
}

.realcruits-btn-secondary:focus-visible {
	outline: 2px solid var(--rc-primary);
	outline-offset: 2px;
	text-decoration: none !important;
}

/* Pill Button Indigo Modifier */
.rc-btn-pill--indigo {
	background: var(--rc-modal-btn-info-bg);
	border-color: var(--rc-modal-btn-info-bg);
}

@media (hover: hover) {
	.rc-btn-pill--indigo:hover {
		background: var(--rc-modal-btn-info-hover);
		border-color: var(--rc-modal-btn-info-hover);
	}
}

/* Disabled State - All Buttons */
.realcruits-btn-primary:disabled,
.realcruits-btn-secondary:disabled,
.rc-btn-pill:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none !important;
}

/* Step Navigation */
.rc-nav {
	display: flex;
	justify-content: space-between;
	margin-top: var(--rc-space-20);
}

.rc-nav--js {
	justify-content: flex-end;
}

.rc-step {
	/* Animation removed - was causing FOUC */
}

.rc-step[aria-hidden="true"] {
	display: none;
}

/* Fade animation available for JS-triggered transitions only */
@keyframes fade {
	from {
		opacity: 0;
		transform: translateY(4px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Progress Bar */
.rc-progress {
	position: relative;
	background: var(--rc-gray-100);
	border-radius: var(--rc-radius-full);
	height: 18px;
	margin: var(--rc-space-10) 0 var(--rc-space-24);
	overflow: hidden;
	font-size: var(--rc-text-xs);
	text-align: left;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .08);
}

.rc-progress-bar {
	background: linear-gradient(90deg, var(--rc-secondary), var(--rc-primary-hover));
	height: 100%;
	width: 0%;
	transition: width .35s ease;
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .2), 0 2px 4px rgba(6, 40, 55, 0.12);
}

/* Modern variant with smoother transition */
.rc-progress.rc-progress--modern .rc-progress-bar {
	transition: width var(--rc-transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
}

.rc-progress-label {
	position: absolute;
	top: 50%;
	left: var(--rc-space-12);
	transform: translateY(-50%);
	font-weight: var(--rc-font-weight-bold);
	color: rgba(255, 255, 255, 0.98);
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
	font-size: var(--rc-text-xs);
}

/* Screen Reader Only Text (Accessibility) */
.rc-screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.rc-progress.rc-progress--modern .rc-progress-label {
	left: var(--rc-space-12);
	transform: translateY(-50%);
}

/* Step Errors */
.rc-step-errors {
	display: block;
	background: var(--rc-error-bg);
	border: 1px solid var(--rc-error-border);
	color: var(--rc-error-text-strong);
	padding: var(--rc-space-10) var(--rc-space-16);
	border-radius: var(--rc-radius-sm);
	margin: 0 0 var(--rc-space-16);
	font-size: var(--rc-text-base);
}

.rc-step-errors:empty {
	display: none;
}

/* Success Messages */
.rc-success-msg {
	display: block;
	background: linear-gradient(135deg, var(--rc-success-bg-light) 0%, var(--rc-success-bg) 100%);
	border: 1px solid var(--rc-success-border);
	color: var(--rc-success-text);
	padding: var(--rc-space-16) var(--rc-space-20);
	border-radius: var(--rc-radius-sm);
	margin: 0 0 var(--rc-space-20);
	font-size: var(--rc-text-base);
	line-height: var(--rc-leading-relaxed);
	box-shadow: var(--rc-shadow-success);
}

.rc-success-msg:empty {
	display: none;
}

.rc-success-msg strong {
	color: var(--rc-success-text-strong);
	font-size: var(--rc-text-md);
	display: block;
	margin-bottom: var(--rc-space-4);
}

.rc-success-msg .rc-success-actions {
	margin-top: var(--rc-space-12);
	display: flex;
	gap: var(--rc-space-10);
	flex-wrap: wrap;
}

/* Grid Utilities */
.rc-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--rc-space-24);
	margin-bottom: var(--rc-space-4);
	align-items: start;
}

.rc-cropper-wrapper {
	grid-column: 1 / -1;
}

.rc-span-2 {
	grid-column: 1 / span 2;
}

/* Grid Variants */
.rc-grid-3col {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--rc-space-16);
	align-items: start;
}

.rc-grid-1col {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--rc-space-12);
}

/* ─────────────── Frontend Login Form ─────────────── */

#realcruits-login-form.rc-login-form {
	max-width: 480px;
	margin: var(--rc-space-40) auto;
	padding: var(--rc-space-40);
	background: linear-gradient(180deg, var(--rc-card-gradient-start), var(--rc-card-gradient-end));
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius-xl);
	box-shadow: var(--rc-shadow-sm);
}

#realcruits-login-form h3 {
	font-family: var(--rc-font-heading);
	font-size: var(--rc-text-2xl);
	font-weight: var(--rc-font-weight-bold);
	/* 700 */
	color: var(--rc-secondary);
	margin: 0 0 var(--rc-space-24) 0;
	text-align: center;
}

/* Registration Form Title */
.realcruits-form h3 {
	font-family: var(--rc-font-heading);
	font-size: var(--rc-text-2xl);
	font-weight: var(--rc-font-weight-bold);
	/* 700 */
	color: var(--rc-secondary);
	margin: 0 0 var(--rc-space-48) 0;
	text-align: center;
}

/* Role Switcher */
.rc-login-roles {
	display: flex;
	justify-content: center;
	gap: var(--rc-space-8);
	margin-bottom: var(--rc-space-24);
}

.rc-role-pill {
	display: flex;
	align-items: center;
	gap: var(--rc-space-6);
	padding: 8px 16px;
	background: var(--rc-white);
	border: 1px solid var(--rc-border);
	border-radius: 999px;
	font-size: var(--rc-text-sm);
	font-weight: var(--rc-font-weight-semibold);
	/* 600 */
	color: var(--rc-gray-600);
	cursor: pointer;
	/* transition controlled by critical CSS section */
}

@media (hover: hover) {
	.rc-role-pill:hover {
		border-color: var(--rc-gray-400);
		color: var(--rc-secondary);
	}
}

.rc-role-pill input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 0;
	height: 0;
	margin: 0;
	opacity: 0;
	position: absolute;
}

.rc-role-pill.rc-selected {
	background: var(--rc-secondary) !important;
	border-color: var(--rc-secondary) !important;
	color: var(--rc-white) !important;
	box-shadow: var(--rc-shadow-sm);
}

/* Inputs */
.rc-login-form label {
	font-weight: var(--rc-font-weight-semibold);
	/* 600 */
	font-size: var(--rc-text-sm);
	color: var(--rc-secondary);
	margin-bottom: var(--rc-space-4);
}

.rc-login-form input[type="email"],
.rc-login-form input[type="password"] {
	width: 100%;
}

/* Actions */
.rc-login-actions {
	margin-top: var(--rc-space-24);
	display: flex;
	flex-direction: column;
	gap: var(--rc-space-16);
	align-items: center;
}

.rc-login-link {
	font-size: var(--rc-text-sm);
	color: var(--rc-gray-600);
	text-decoration: none;
	transition: color 0.1s;
}

@media (hover: hover) {
	.rc-login-link:hover {
		color: var(--rc-link-primary-hover);
		text-decoration: underline;
	}
}

/* Messages */
.rc-welcome-message {
	background: transparent;
	color: inherit;
	padding: var(--rc-space-36) 0 var(--rc-space-40);
	border-radius: 0;
	text-align: center;
	margin: var(--rc-space-24) 0;
	border: 0;
	box-shadow: none;
}

.rc-welcome-message h2 {
	margin: 0 0 var(--rc-space-16);
	font-size: var(--rc-text-3xl);
	color: var(--rc-ink);
}

.rc-welcome-message p {
	margin: var(--rc-space-10) 0 var(--rc-space-12);
	color: var(--rc-ink);
	line-height: var(--rc-leading-relaxed);
}

.rc-step-errors {
	background: #fff;
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius-md);
	padding: var(--rc-space-16);
	margin-bottom: var(--rc-space-24);
	text-align: center;
}

.rc-step-errors {
	border-color: var(--rc-error-border-strong);
	background: var(--rc-error-bg-light);
}

.rc-step-errors ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rc-step-errors li {
	color: var(--rc-error-text);
	font-size: var(--rc-text-sm);
	font-weight: var(--rc-font-weight-medium);
	/* 500 */
}

/* Signup Footer */
.rc-login-footer {
	margin-top: var(--rc-space-16);
	padding-top: var(--rc-space-16);
	border-top: 1px solid var(--rc-border-light);
	text-align: center;
}

.rc-signup-text {
	font-size: var(--rc-text-sm);
	color: var(--rc-secondary);
	font-weight: var(--rc-font-weight-medium);
	/* 500 */
	margin-bottom: var(--rc-space-12);
	line-height: var(--rc-leading-snug);
}

.rc-signup-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--rc-space-8);
}

.rc-signup-link {
	font-weight: var(--rc-font-weight-semibold);
	/* 600 */
	color: var(--rc-secondary);
}

.rc-sep {
	color: var(--rc-gray-400);
}

/* Mobile Responsive - Login Form */
@media (max-width: 680px) {
	#realcruits-login-form.rc-login-form {
		padding: var(--rc-space-24);
		margin: var(--rc-space-24) auto;
	}
}

@media (max-width: 480px) {
	#realcruits-login-form.rc-login-form {
		max-width: 100%;
		padding: var(--rc-space-16);
		margin: var(--rc-space-20) auto;
	}

	#realcruits-login-form h3 {
		font-size: var(--rc-text-xl);
		margin-bottom: var(--rc-space-16);
	}

	/* Stack role pills vertically */
	.rc-login-roles {
		flex-direction: column;
		gap: var(--rc-space-6);
	}

	.rc-role-pill {
		width: 100%;
		justify-content: center;
	}

	/* Full width button */
	.rc-login-actions .realcruits-btn-primary {
		width: 100%;
	}

	/* Stack signup links vertically */
	.rc-signup-links {
		flex-direction: column;
		gap: var(--rc-space-6);
	}

	.rc-sep {
		display: none;
	}
}

@media (max-width: 767px) {
	.realcruits-page {
		padding: var(--rc-space-24) var(--rc-space-16);
	}

	/* Mobile: ensure Browse/Unlocked pages aren't constrained by theme columns */
	.realcruits-page.rc-browse {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		box-sizing: border-box;
	}

	.rc-dashboard-2col {
		grid-template-columns: 1fr !important;
		justify-items: center;
		max-width: 100%;
	}

	.rc-dashboard-2col>* {
		width: 100%;
		max-width: 600px;
	}

	.rc-grid-3col {
		grid-template-columns: repeat(2, minmax(220px, 1fr));
	}

	.rc-grid {
		grid-template-columns: 1fr;
		gap: var(--rc-space-20) 0;
	}

	.rc-span-2 {
		grid-column: 1;
	}

	/* Registration Navigation - Stack buttons vertically on mobile (Next/Submit on top, Previous on bottom) */
	.rc-nav {
		flex-direction: column-reverse;
		gap: var(--rc-space-12);
		align-items: stretch;
	}

	.rc-nav .realcruits-btn-primary,
	.rc-nav .realcruits-btn-secondary {
		width: 100%;
		max-width: none;
		white-space: normal;
		box-sizing: border-box;
	}

	.rc-nav .rc-inline-actions {
		display: flex;
		flex-direction: column;
		gap: var(--rc-space-12);
		width: 100%;
	}

	.rc-nav .rc-inline-actions>* {
		width: 100%;
		box-sizing: border-box;
	}
}

/* Unified Login Form */
.rc-login-form h3 {
	font-size: var(--rc-text-3xl);
	margin: 0 0 var(--rc-space-16);
	font-weight: var(--rc-font-weight-bold);
	letter-spacing: var(--rc-letter-spacing-base);
	color: var(--rc-ink);
}

.rc-login-form input[type=email],
.rc-login-form input[type=password] {
	background: var(--rc-bg-light);
}

.rc-login-form input[type=email]:focus,
.rc-login-form input[type=password]:focus {
	background: var(--rc-card-bg);
	box-shadow: var(--rc-shadow-focus);
	border-color: var(--rc-primary);
	outline: none;
}

/* Role Pills (Login) */
.rc-login-roles {
	display: flex;
	gap: var(--rc-space-10);
	margin: 0 0 var(--rc-space-24);
	padding: var(--rc-space-4);
	background: transparent;
	border: none;
}

.rc-login-roles .rc-role-pill {
	position: relative;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	padding: var(--rc-space-10) var(--rc-space-20);
	border-radius: var(--rc-radius-lg);
	font-weight: var(--rc-font-weight-semibold);
	font-size: var(--rc-text-base);
	letter-spacing: var(--rc-letter-spacing-tight);
	background: var(--rc-gray-100);
	color: var(--rc-ink);
	/* transition controlled by critical CSS section */
}

.rc-login-roles .rc-role-pill input {
	position: absolute;
	inset: 0;
	opacity: 0;
}

@media (hover: hover) {
	.rc-login-roles .rc-role-pill:not(.rc-selected):hover {
		background: var(--rc-border-light);
	}
}

.rc-login-roles .rc-role-pill.rc-selected {
	background: var(--rc-primary);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
	color: var(--rc-ink);
}

/* Pagination - uses token system for consistency */
.rc-pagination {
	display: flex;
	justify-content: center;
}

.rc-pager {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--rc-space-8);
	align-items: center;
	flex-wrap: wrap;
}

.rc-page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 var(--rc-space-10);
	border-radius: var(--rc-radius-sm);
	border: 1px solid var(--rc-border-light);
	background: var(--rc-card-bg);
	color: var(--rc-ink);
	font-size: var(--rc-text-base);
	font-weight: var(--rc-font-weight-semibold);
	text-decoration: none !important;
	cursor: pointer;
	transition: var(--rc-btn-transition);
	box-shadow: var(--rc-btn-shadow);
}

@media (hover: hover) {
	.rc-page-link:hover {
		background: var(--rc-bg-light);
		transform: translateY(-1px);
		box-shadow: var(--rc-btn-shadow-hover);
		text-decoration: none !important;
	}

	.rc-page-link.rc-current:hover {
		transform: none;
	}
}

.rc-page-link:active,
.rc-page-link:focus {
	text-decoration: none !important;
}

.rc-page-link:focus-visible {
	outline: 2px solid var(--rc-primary);
	outline-offset: 2px;
	box-shadow: var(--rc-shadow-focus);
	text-decoration: none !important;
}

.rc-page-link.rc-current {
	background: var(--rc-btn-primary-bg);
	border-color: var(--rc-btn-primary-border);
	color: var(--rc-btn-primary-text);
	cursor: default;
	box-shadow: var(--rc-btn-shadow);
}

/* Shared Status Pills */
.rc-status {
	display: inline-block;
	padding: 2px var(--rc-space-8);
	border-radius: var(--rc-radius-sm);
	font-size: var(--rc-text-xs);
	font-weight: var(--rc-font-weight-semibold);
}

.rc-status-approved {
	background: var(--rc-status-success-bg);
	color: var(--rc-status-success-text);
	border: 1px solid var(--rc-status-success-border);
}

.rc-status-pending,
.rc-status-pending_approval {
	background: var(--rc-status-warning-bg);
	color: var(--rc-status-warning-text);
	border: 1px solid var(--rc-status-warning-border);
}

.rc-status-inactive {
	background: var(--rc-gray-100);
	color: var(--rc-status-inactive-text);
	border: 1px solid var(--rc-gray-300);
}

/* Typography Utilities */
.rc-typo-h1 {
	font-family: var(--rc-typo-h1-family);
	font-size: var(--rc-typo-h1-size);
	font-weight: var(--rc-typo-h1-weight);
	line-height: var(--rc-typo-h1-height);
	letter-spacing: var(--rc-typo-h1-spacing);
	color: var(--rc-ink);
}

.rc-typo-h2 {
	font-family: var(--rc-typo-h2-family);
	font-size: var(--rc-typo-h2-size);
	font-weight: var(--rc-typo-h2-weight);
	line-height: var(--rc-typo-h2-height);
	letter-spacing: var(--rc-typo-h2-spacing);
	color: var(--rc-ink);
}

.rc-typo-h3 {
	font-family: var(--rc-typo-h3-family);
	font-size: var(--rc-typo-h3-size);
	font-weight: var(--rc-typo-h3-weight);
	line-height: var(--rc-typo-h3-height);
	letter-spacing: var(--rc-typo-h3-spacing);
	color: var(--rc-ink);
}

.rc-typo-label {
	font-family: var(--rc-typo-label-family);
	font-size: var(--rc-typo-label-size);
	font-weight: var(--rc-typo-label-weight);
	line-height: var(--rc-typo-label-height);
	color: var(--rc-typo-label-color);
}

.rc-typo-body {
	font-family: var(--rc-typo-body-family);
	font-size: var(--rc-typo-body-size);
	font-weight: var(--rc-typo-body-weight);
	line-height: var(--rc-typo-body-height);
	color: var(--rc-typo-body-color);
}

.rc-typo-small {
	font-family: var(--rc-typo-small-family);
	font-size: var(--rc-typo-small-size);
	font-weight: var(--rc-typo-small-weight);
	line-height: var(--rc-typo-small-height);
	color: var(--rc-typo-small-color);
}

.rc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* Utility Classes */
.rc-hidden {
	display: none !important;
}

.rc-text-center {
	text-align: center;
}

.rc-flex {
	display: flex;
}

.rc-flex-col {
	display: flex;
	flex-direction: column;
}

.rc-flex-1 {
	flex: 1;
}

.rc-items-center {
	align-items: center;
}

.rc-justify-between {
	justify-content: space-between;
}

.rc-justify-end {
	justify-content: flex-end;
}

.rc-gap-8 {
	gap: var(--rc-space-8);
}

.rc-gap-10 {
	gap: var(--rc-space-10);
}

.rc-gap-12 {
	gap: var(--rc-space-12);
}

.rc-gap-16 {
	gap: var(--rc-space-16);
}

.rc-gap-24 {
	gap: var(--rc-space-24);
}

.rc-mb-4 {
	margin-bottom: var(--rc-space-4);
}

.rc-mb-6 {
	margin-bottom: var(--rc-space-6);
}

.rc-mb-8 {
	margin-bottom: var(--rc-space-8);
}

.rc-mb-10 {
	margin-bottom: var(--rc-space-10);
}

.rc-mb-12 {
	margin-bottom: var(--rc-space-12);
}

.rc-mb-16 {
	margin-bottom: var(--rc-space-16);
}

.rc-mb-20 {
	margin-bottom: var(--rc-space-20);
}

.rc-mb-24 {
	margin-bottom: var(--rc-space-24);
}

.rc-mb-32 {
	margin-bottom: var(--rc-space-32);
}

.rc-mb-40 {
	margin-bottom: var(--rc-space-40);
}

.rc-mb-48 {
	margin-bottom: var(--rc-space-48);
}

.rc-mt-12 {
	margin-top: var(--rc-space-12);
}

.rc-mt-16 {
	margin-top: var(--rc-space-16);
}

.rc-mt-24 {
	margin-top: var(--rc-space-24);
}

.rc-mt-32 {
	margin-top: var(--rc-space-32);
}

.rc-text-muted {
	color: var(--rc-muted);
}

.rc-text-sm {
	font-size: var(--rc-text-sm);
}

/* Typography Text 2 - Helper text (darker for better readability) */
/* Must come after .rc-text-muted to override */
.rc-text-muted.rc-text-sm {
	font-family: var(--rc-typo-text-2-family);
	font-size: var(--rc-typo-text-2-size);
	font-weight: var(--rc-typo-text-2-weight);
	line-height: var(--rc-typo-text-2-line-height);
	color: var(--rc-typo-text-2-color);
}

.rc-w-full {
	width: 100%;
}

.rc-flex-wrap {
	flex-wrap: wrap;
}

.rc-self-start {
	align-self: flex-start;
}

.rc-m-0 {
	margin: 0;
}

/* Shared Card */
.rc-card {
	background: var(--rc-card-bg);
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius-lg);
	padding: var(--rc-space-40);
	box-shadow: var(--rc-card-shadow);
	transition: box-shadow var(--rc-transition-base), transform var(--rc-transition-fast);
}

/* .rc-card:hover removed to prevent floating effect on registration/static forms */

.rc-card h4 {
	margin: 0 0 var(--rc-space-16);
	font-family: var(--rc-typo-header-3-family);
	font-size: var(--rc-typo-header-3-size);
	font-weight: var(--rc-typo-header-3-weight);
	line-height: var(--rc-typo-header-3-line-height);
	letter-spacing: var(--rc-typo-header-3-spacing);
	color: var(--rc-secondary);
}

.rc-card p {
	font-family: var(--rc-typo-text-2-family);
	font-size: var(--rc-typo-text-2-size);
	font-weight: var(--rc-typo-text-2-weight);
	line-height: var(--rc-typo-text-2-line-height);
	color: var(--rc-typo-text-2-color);
}

/* Badge Component */
.rc-badge {
	display: inline-flex;
	width: var(--rc-space-16);
	height: var(--rc-space-16);
	align-items: center;
	justify-content: center;
	border-radius: var(--rc-radius-sm);
	color: var(--rc-white);
	font-size: var(--rc-text-xs);
	font-weight: var(--rc-font-weight-semibold);
}

.rc-badge--ok {
	background: var(--rc-badge-success-bg);
}

.rc-badge--error {
	background: var(--rc-badge-error-bg);
}

/* Chip Component */
.rc-chip {
	display: inline-block;
	padding: var(--rc-chip-padding);
	border-radius: var(--rc-chip-radius);
	background: var(--rc-chip-bg);
	border: var(--rc-chip-border);
	box-shadow: var(--rc-chip-shadow);
	color: var(--rc-body);
	font-size: var(--rc-chip-font-size);
	font-weight: var(--rc-chip-font-weight);
	line-height: 1.4;
	white-space: nowrap;
}

.rc-chip-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Common Label Component */
.rc-label-text {
	font-size: var(--rc-text-xxs);
	font-weight: var(--rc-font-weight-bold);
	color: var(--rc-muted);
	text-transform: uppercase;
	letter-spacing: 0.8px;
	margin-bottom: 2px;
}

/* Tooltip Component */
.rc-tooltip {
	position: relative;
	display: inline-block;
	cursor: help;
}

.rc-tooltip-box {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: var(--rc-space-8);
	padding: var(--rc-space-12) var(--rc-space-16);
	background: var(--rc-gray-800);
	color: var(--rc-white);
	border-radius: var(--rc-radius-sm);
	box-shadow: var(--rc-shadow-avatar);
	font-size: var(--rc-text-xs);
	line-height: var(--rc-leading-normal);
	white-space: normal;
	min-width: 240px;
	max-width: 320px;
	z-index: var(--rc-z-tooltip);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--rc-transition-base) ease, visibility var(--rc-transition-base) ease;
	pointer-events: none;
}

.rc-tooltip-box::after {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: var(--rc-space-6) solid transparent;
	border-bottom-color: var(--rc-gray-800);
}

@media (hover: hover) {
	.rc-tooltip:hover .rc-tooltip-box {
		opacity: 1;
		visibility: visible;
	}
}

.rc-tooltip:focus .rc-tooltip-box {
	opacity: 1;
	visibility: visible;
}

.rc-tooltip-box ul {
	margin: 0;
	padding-left: var(--rc-space-20);
}

.rc-tooltip-box li {
	margin: var(--rc-space-4) 0;
}

/* Section Header Utility */
.rc-section-header {
	font-size: var(--rc-text-xxs);
	font-weight: var(--rc-font-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--rc-tracking-wide);
	color: var(--rc-gray-400);
	margin-bottom: var(--rc-space-4);
}

/* Info Card - Profile & Detail Pages */
.rc-info-card {
	background: var(--rc-card-bg);
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius-lg);
	padding: var(--rc-space-40);
	margin-bottom: var(--rc-space-20);
	box-shadow: var(--rc-card-shadow);
	transition: box-shadow var(--rc-transition-base), transform var(--rc-transition-fast);
}

@media (hover: hover) {
	.rc-info-card:hover {
		box-shadow: var(--rc-card-shadow-hover);
		transform: translateY(-1px);
	}
}

.rc-info-card h4 {
	font-family: var(--rc-typo-header-3-family);
	font-size: var(--rc-typo-header-3-size);
	font-weight: var(--rc-typo-header-3-weight);
	line-height: var(--rc-typo-header-3-line-height);
	letter-spacing: var(--rc-typo-header-3-spacing);
	color: var(--rc-secondary);
}

.rc-info-card h3 {
	font-family: var(--rc-typo-header-2-family);
	font-size: var(--rc-typo-header-2-size);
	font-weight: var(--rc-typo-header-2-weight);
	line-height: var(--rc-typo-header-2-line-height);
	letter-spacing: var(--rc-typo-header-2-spacing);
	color: var(--rc-secondary);
}

.rc-info-card .rc-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rc-space-12);
}

.rc-info-card .rc-card-head h3 {
	margin: 0;
}

.rc-card__content {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Avatar Component System */
.rc-avatar {
	border-radius: 50%;
	object-fit: cover;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--rc-gray-100) 0%, var(--rc-border-light) 100%);
	border: var(--rc-avatar-border-width) solid var(--rc-avatar-border-color);
	box-shadow: var(--rc-avatar-shadow);
}

/* Candidate Avatar (with custom ring color support for tier-based colors) */
.rc-candidate-avatar {
	width: var(--rc-avatar-xl);
	height: var(--rc-avatar-xl);
	min-width: var(--rc-avatar-xl);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: linear-gradient(135deg, var(--rc-gray-100) 0%, var(--rc-border-light) 100%);
	border: var(--rc-avatar-border-width) solid var(--rc-avatar-ring, var(--rc-avatar-border-color));
	box-shadow: var(--rc-avatar-shadow);
}

.rc-candidate-avatar[hidden] {
	display: none !important;
}

/* Avatar blur effect for pre-unlock privacy */
.rc-avatar-blur {
	filter: blur(3px) saturate(0.9) brightness(1.05);
	-webkit-filter: blur(3px) saturate(0.9) brightness(1.05);
	pointer-events: none;
	user-select: none;
}

/* Dashboard Grid Layout */
.rc-dashboard-2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--rc-space-32);
	align-items: start;
}

.rc-dash-right {
	display: grid;
	grid-template-rows: auto auto;
	gap: var(--rc-space-32);
}

.rc-dash-right .rc-card {
	background: linear-gradient(180deg, var(--rc-card-gradient-start), var(--rc-card-gradient-end));
	border: 1px solid var(--rc-border);
	box-shadow: var(--rc-card-shadow);
	transition: box-shadow var(--rc-transition-base), transform var(--rc-transition-fast);
}

@media (hover: hover) {
	.rc-dash-right .rc-card:hover {
		box-shadow: var(--rc-card-shadow-hover);
		transform: translateY(-1px);
	}
}



/* Dashboard Profile Card - Used on jobseeker/employer dashboards */
.rc-dashboard-profile-card {
	padding: var(--rc-space-40);
	background: linear-gradient(180deg, var(--rc-card-gradient-start), var(--rc-card-gradient-end));
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius-lg);
	box-shadow: var(--rc-card-shadow);
	transition: box-shadow var(--rc-transition-base), transform var(--rc-transition-fast);
}

@media (hover: hover) {
	.rc-dashboard-profile-card:hover {
		box-shadow: var(--rc-card-shadow-hover);
		transform: translateY(-1px);
	}
}

.rc-snap-header {
	display: flex;
	align-items: center;
	gap: var(--rc-space-20);
	margin-bottom: var(--rc-space-24);
	flex-wrap: wrap;
}

.rc-jobseeker-avatar {
	width: var(--rc-avatar-2xl);
	height: var(--rc-avatar-2xl);
	border-radius: 50%;
	object-fit: cover;
	border: var(--rc-avatar-border-width) solid var(--rc-avatar-border-color);
	box-shadow: var(--rc-avatar-shadow);
}

.rc-jobseeker-avatar--lg {
	width: var(--rc-avatar-3xl);
	height: var(--rc-avatar-3xl);
}

.rc-jobseeker-avatar--placeholder {
	background: linear-gradient(135deg, var(--rc-gray-50) 0%, var(--rc-gray-100) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--rc-emoji-2xl);
	color: var(--rc-gray-400);
}

.rc-jobseeker-avatar--placeholder::before {
	content: "?";
}

/* Mobile: Reduce jobseeker avatar size */
@media (max-width: 767px) {
	.rc-jobseeker-avatar {
		width: 80px;
		height: 80px;
	}
}

.rc-snap-meta {
	flex: 1;
	min-width: 0;
}

.rc-snap-title {
	font-family: var(--rc-typo-header-2-family);
	font-size: var(--rc-typo-header-2-size);
	font-weight: var(--rc-typo-header-2-weight);
	line-height: var(--rc-typo-header-2-line-height);
	letter-spacing: var(--rc-typo-header-2-spacing);
	color: var(--rc-secondary);
	margin: 0 0 var(--rc-space-10);
}

.rc-snap-sub {
	font-family: var(--rc-typo-text-1-family);
	font-size: var(--rc-typo-text-1-size);
	font-weight: var(--rc-typo-text-1-weight);
	line-height: var(--rc-typo-text-1-line-height);
	color: var(--rc-typo-text-1-color);
	margin-bottom: var(--rc-space-12);
}

.rc-snap-list {
	display: flex;
	flex-direction: column;
	gap: var(--rc-space-12);
}

/* Max Width Utilities */
.rc-max-w-1080 {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--rc-max-w-lg);
}

/* Info Row for Profile Details */
.rc-info-row {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--rc-space-8);
	padding: var(--rc-space-12) 0;
	border-bottom: 1px solid var(--rc-gray-100);
}

.rc-info-row .rc-label {
	font-size: var(--rc-text-md);
	color: var(--rc-gray-800);
	font-weight: var(--rc-font-weight-semibold);
}

/* Dotted Line Helper - Base Pattern */
.rc-line-row {
	display: flex;
	align-items: center;
	gap: var(--rc-space-8);
	margin: var(--rc-space-4) 0;
}

/* Full-width variant (no dotted line) */
.rc-line-row--full {
	flex-direction: column;
	gap: var(--rc-space-4);
}

.rc-line-label {
	font-family: var(--rc-typo-label-1-family);
	font-size: var(--rc-typo-label-1-size);
	font-weight: var(--rc-typo-label-1-weight);
	line-height: var(--rc-typo-label-1-line-height);
	color: var(--rc-typo-label-1-color);
	white-space: nowrap;
	flex-shrink: 0;
}

.rc-line {
	flex: 1;
	border-bottom: 1px dashed var(--rc-border-light);
	height: 0;
	min-width: var(--rc-space-20);
}

.rc-line-value {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rc-space-8);
	justify-content: flex-end;
	text-align: right;
	font-family: var(--rc-typo-text-2-family);
	font-size: var(--rc-typo-text-2-size);
	font-weight: var(--rc-typo-text-2-weight);
	line-height: var(--rc-typo-text-2-line-height);
	color: var(--rc-typo-text-2-color);
}

/* ─────────────── Modal Styles Moved to modals.css ─────────────── */
/* All modal foundation, jobseeker modals, employer modals, and admin modals now in modals.css */

/* Responsive: Reduce card padding on mobile */
@media (max-width: 767px) {

	.rc-card,
	.rc-dashboard-profile-card,
	.rc-dash-right .rc-card {
		padding: var(--rc-space-16);
	}
}