/**
 * ========================================================================
 * 🎨 JEMER ACADEMY PASSWORD RECOVERY STYLESHEET (V1.0)
 * ========================================================================
 * Description: Presentation layer structural rules for the recovery flow.
 * Engineering Focus: Hardware-accelerated transitions, responsive phase cards,
 * and high-contrast accessibility focus states.
 * Compliance: Unified design language across all onboarding entry routes.
 * ========================================================================
 */

/* ==========================================================================
   1. GLOBAL SYSTEM SETUP & DESIGN TOKEN INITIALIZATION
   ========================================================================== */
:root {
  /* Main layout typography token parameters */
  --font-inter: 'Inter', sans-serif;
  --font-outfit: 'Outfit', sans-serif;

  /* Corporate palette variables tracking master identity criteria */
  --edu-blue-primary: #0B2545;
  --edu-blue-hover: #134074;
  --edu-blue-light: #EEF4F8;
  
  /* Validation state notifications indicators */
  --alert-error: #EF4444;
  --alert-success: #22C55E;
  --text-muted: #64748B;
}

/* Document canvas optimization rules */
html {
  scroll-behavior: smooth;
  font-family: var(--font-inter);
}

/* ==========================================================================
   2. LEFT PANEL CORE HARDWARE-ACCELERATED SLIDESHOW CAROUSEL
   ========================================================================== */

/* Absolute image layering container rule set */
.slideshow-image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  /* Bind operations to GPU layers to protect layout rendering timelines */
  will-change: opacity, transform;
  /* Configure a smooth ease interpolation loop across 1.2 seconds */
  transition: opacity 1200ms cubic-bezier(0.4, 0, 0.2, 1), transform 1200ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Apply minimal scaling offset variables to yield profound parallax depth effects */
  transform: scale(1.02);
}

/* Toggle visibility overrides for active graphic layers */
.slideshow-image.active-slide {
  opacity: 1;
  z-index: 2;
  transform: scale(1);
}

/* Obscure inactive slide components fully out of presentation lines */
.slideshow-image:not(.active-slide) {
  opacity: 0;
  z-index: 1;
  transform: scale(1.05);
}

/* Linear width and color properties adjustments for carousel tracker dots */
.slide-dot {
  will-change: width, background-color;
  transition: width 300ms ease, background-color 300ms ease;
}

/* ==========================================================================
   3. MULTI-PHASE FIELD LAYOUT SWAPS & CARD ANIMATIONS
   ========================================================================== */

/* Target fieldset card structures managing state visibility */
fieldset[data-phase-active="true"] {
  will-change: opacity, transform;
  /* Trigger dynamic presentation entry shifts via a sharp cubic curve */
  animation: phaseSweepIn 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes phaseSweepIn {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Overriding class managed by client-side application script states */
.hidden {
  display: none !important;
}

/* ==========================================================================
   4. DATA ENTRY UTILITY FIELD inputs & INTERACTIVE CONTROLS
   ========================================================================== */

/* Main text field entry properties configuration loop */
.onboarding-input {
  font-family: var(--font-inter);
  transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}

/* Anchor focus perimeters when users select input areas */
.onboarding-input:focus {
  border-color: var(--edu-blue-primary) !important;
  box-shadow: 0 0 0 1px var(--edu-blue-primary);
  background-color: #FFFFFF;
}

/* Target field styling states when flagged with validation execution faults */
.onboarding-input.input-field-error {
  border-color: var(--alert-error) !important;
  background-color: #FFF5F5 !important;
}

/* ==========================================================================
   5. INTERCEPT INPUT PIN BOX MATRIX INTERFACE
   ========================================================================== */

/* Dynamic parameters properties configuring code verification digits fields */
.pin-box {
  will-change: transform, border-color;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Expand design tokens prominent styling attributes when code boxes get focused */
.pin-box:focus {
  border-color: var(--edu-blue-primary) !important;
  background-color: #FFFFFF !important;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(11, 37, 69, 0.08);
}

/* ==========================================================================
   6. COMPLEXITY ASSESSMENT GRID TRACK LAYOUTS
   ========================================================================== */

/* Adjust text line variables for compliant checklist requirements elements */
.matrix-requirement-valid {
  color: var(--alert-success) !important;
  font-weight: 600;
}

/* Adjust text line variables for failing checklist requirements targets */
.matrix-requirement-invalid {
  color: var(--alert-error) !important;
}

/* Secondary choice checkboxes input modification rules */
.onboarding-checkbox {
  color: var(--edu-blue-primary) !important;
  border-radius: 4px;
  transition: color 200ms ease, border-color 200ms ease;
}

/* ==========================================================================
   7. ULTRA-RESPONSIVE VIEWPORT TRANSFORMATION PARAMETERS (MID-TIER DEVICES)
   ========================================================================== */

/* Tailor container rules when structural landscapes step below standard dimensions */
@media (max-width: 1023px) {
  body {
    background-color: #FFFFFF;
  }
}

/* Cushion structural boundaries across compressed screens (e.g., Foldable Devices) */
@media (min-width: 640px) and (max-width: 1023px) {
  #master-recovery-form {
    padding: 2.5rem;
    border-radius: 1.5rem;
    background-color: #F8FAFC;
    border: 1px solid #E2E8F0;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  }
}