/* ==========================================================================
   CTM PATH™ Guided Journey™

   File        : assessment.css
   Version     : 1.0
   Status      : DEVELOPMENT
   Stage       : STAGE 3 — ASSESSMENT SYSTEM

   Purpose     :
   Shared assessment page styling.

   Responsibilities:

   • Assessment layout.
   • Progress visualization.
   • Question presentation.
   • Rating interface.
   • Navigation controls.

   Does NOT:

   • Calculate scores.
   • Validate answers.
   • Manage assessment state.

   ========================================================================== */


/* ==========================================================================
   ASSESSMENT PAGE
   ========================================================================== */


.assessment-page {

    min-height:

        100vh;

    padding-top:

        var(--space-10);

    padding-bottom:

        var(--space-10);

}



.assessment-wrapper {

    width:

        100%;

    max-width:

        900px;

    margin:

        0 auto;

    display:

        flex;

    flex-direction:

        column;

    gap:

        var(--space-8);

}




/* ==========================================================================
   PROGRESS SECTION
   ========================================================================== */


.assessment-progress {

    width:

        100%;

}



.assessment-step {

    color:

        var(--ctm-teal);

    font-size:

        var(--text-sm);

    font-weight:

        var(--weight-semibold);

    letter-spacing:

        0.08em;

    text-transform:

        uppercase;

    margin-bottom:

        var(--space-3);

}



.progress-wrapper {

    width:

        100%;

}




/* ==========================================================================
   ASSESSMENT HEADER
   ========================================================================== */


.assessment-header {

    text-align:

        center;

    max-width:

        760px;

    margin:

        0 auto;

}



.assessment-eyebrow {

    color:

        var(--ctm-muted-gold);

    font-size:

        var(--text-sm);

    font-weight:

        var(--weight-semibold);

    margin-bottom:

        var(--space-3);

}



.assessment-title {

    margin-bottom:

        var(--space-4);

}



.assessment-description {

    font-size:

        var(--text-lg);

    color:

        var(--ctm-text-secondary);

}

/* ==========================================================================
   CTM PATH™ Guided Journey™

   File        : assessment.css
   Continuation: Batch 1B

   ========================================================================== */


/* ==========================================================================
   ASSESSMENT CARD
   ========================================================================== */


.assessment-card {

    width:

        100%;

    padding:

        var(--space-10);

}




/* ==========================================================================
   QUESTION CONTAINER
   ========================================================================== */


.question-container {

    display:

        flex;

    flex-direction:

        column;

    gap:

        var(--space-6);

}



/* ==========================================================================
   QUESTION CARD
   ========================================================================== */


.question-card {

    width:

        100%;

    padding:

        var(--space-6);

    border-radius:

        var(--radius-lg);

    background:

        var(--ctm-surface-elevated);

    border:

        1px solid var(--border-subtle);

}



.question-number {

    color:

        var(--ctm-teal);

    font-size:

        var(--text-sm);

    font-weight:

        var(--weight-semibold);

    margin-bottom:

        var(--space-3);

}



.question-text {

    color:

        var(--ctm-text-primary);

    font-size:

        var(--text-lg);

    line-height:

        1.6;

    margin-bottom:

        var(--space-6);

}




/* ==========================================================================
   RATING SCALE
   ========================================================================== */


.rating-scale {

    display:

        grid;

    grid-template-columns:

        repeat(10, 1fr);

    gap:

        var(--space-2);

}



.rating-option {

    position:

        relative;

}



.rating-option input {

    position:

        absolute;

    opacity:

        0;

}



.rating-option label {

    display:

        flex;

    align-items:

        center;

    justify-content:

        center;

    width:

        100%;

    aspect-ratio:

        1;

    border-radius:

        var(--radius-pill);

    background:

        rgba(255,255,255,0.06);

    border:

        1px solid var(--border-subtle);

    color:

        var(--ctm-text-secondary);

    cursor:

        pointer;

    transition:

        all var(--transition-default);

}



.rating-option label:hover {

    border-color:

        var(--ctm-teal);

    color:

        var(--ctm-teal-light);

}



.rating-option input:checked + label {

    background:

        var(--ctm-teal);

    color:

        var(--ctm-white);

    border-color:

        var(--ctm-teal);

}

/* ==========================================================================
   CTM PATH™ Guided Journey™

   File        : assessment.css
   Continuation: Batch 1C

   ========================================================================== */


/* ==========================================================================
   ASSESSMENT NAVIGATION
   ========================================================================== */


.assessment-actions {

    display:

        flex;

    justify-content:

        space-between;

    align-items:

        center;

    gap:

        var(--space-6);

    margin-top:

        var(--space-8);

}



.assessment-actions .btn {

    min-width:

        180px;

}



/* ==========================================================================
   ASSESSMENT FOOTER
   ========================================================================== */


.assessment-footer {

    text-align:

        center;

    max-width:

        650px;

    margin:

        0 auto;

}



.assessment-footer p {

    color:

        var(--ctm-text-muted);

    font-size:

        var(--text-sm);

    font-style:

        italic;

}




/* ==========================================================================
   QUESTION TRANSITIONS
   ========================================================================== */


.question-card {

    animation:

        assessmentFadeIn

        0.35s

        ease;

}



@keyframes assessmentFadeIn {


    from {


        opacity:

            0;


        transform:

            translateY(12px);



    }



    to {


        opacity:

            1;


        transform:

            translateY(0);



    }


}




/* ==========================================================================
   SELECTED STATE ENHANCEMENTS
   ========================================================================== */


.rating-option input:focus-visible + label {

    outline:

        3px solid var(--ctm-teal-light);

    outline-offset:

        3px;

}



.rating-option input:disabled + label {

    opacity:

        0.5;

    cursor:

        not-allowed;

}




/* ==========================================================================
   ASSESSMENT COMPLETION STATE

   Controlled by JavaScript.

   ========================================================================== */


.assessment-complete {

    text-align:

        center;

    padding:

        var(--space-12);

}



.assessment-complete h2 {

    margin-bottom:

        var(--space-4);

}



.assessment-complete p {

    color:

        var(--ctm-text-secondary);

    max-width:

        600px;

    margin:

        0 auto;

}



/* ==========================================================================
   END OF FILE

   File:

   css/assessment.css


   Status:

   SHARED ASSESSMENT STYLE SYSTEM COMPLETE


   Next:

   js/assessment-01.js

   ========================================================================== */