/* ==========================================================
   HRTECHIFY DESIGN SYSTEM
   Module 12
   Executive Assessment
   Version : v1.1.0
========================================================== */


/* ==========================================================
   ELEGANT TYPOGRAPHY
   Used sparingly — for the coach's dialogue and conversational
   headings — so the experience reads like a guided chat rather
   than a form. Buttons, inputs and body copy keep the base
   sans-serif for clarity.
========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500;1,9..144,600&display=swap');


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

.exec-page{

    background:var(--bg-primary);

    color:var(--text-primary);

    min-height:100vh;

}


.exec-main{

    width:100%;

    padding-top:130px;

    padding-bottom:80px;

}


.exec-container{

    width:min(1180px,92%);

    margin:0 auto;

}


.exec-shell{

    display:flex;

    flex-direction:column;

    gap:40px;

}


/* ==========================================================
   LANDING
========================================================== */

.exec-landing{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:46vh;

}


.exec-landing-card{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    max-width:560px;

    background:var(--gradient-card);

    border:1px solid var(--glass-border);

    border-radius:28px;

    padding:56px;

    backdrop-filter:blur(22px);

    box-shadow:var(--shadow-lg);

}


.exec-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    border-radius:999px;

    background:rgba(255,176,0,.12);

    color:var(--brand-gold);

    border:1px solid rgba(255,176,0,.20);

    font-size:.82rem;

    font-weight:600;

    margin-bottom:24px;

}


.exec-landing-card h1{

    font-size:clamp(2.5rem,4vw,4rem);

    margin-bottom:22px;

    line-height:1.2;

}


.exec-introduction{

    max-width:760px;

    color:var(--text-secondary);

    font-size:1.12rem;

    line-height:1.9;

    margin-bottom:36px;

}


/* ==========================================================
   SUMMARY STRIP
========================================================== */

.exec-highlights{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin-bottom:36px;

}


.exec-highlight{

    display:flex;

    gap:16px;

    align-items:center;

    padding:22px;

    border-radius:18px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.06);

}


.exec-highlight i{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:var(--gradient-brand);

    color:#fff;

    font-size:1.15rem;

}


.exec-highlight strong{

    display:block;

    margin-bottom:6px;

}


.exec-highlight span{

    color:var(--text-muted);

    font-size:.92rem;

}

/* ==========================================================
   PRINCIPLES
========================================================== */

.exec-principles{

    display:grid;

    gap:18px;

    margin-bottom:42px;

}

.exec-principle{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:22px 24px;

    border-radius:18px;

    background:rgba(255,255,255,.035);

    border:1px solid rgba(255,255,255,.08);

    transition:all .30s ease;

}

.exec-principle:hover{

    transform:translateY(-4px);

    border-color:rgba(255,176,0,.25);

    box-shadow:0 14px 30px rgba(0,0,0,.20);

}

.exec-principle i{

    width:50px;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:14px;

    background:var(--gradient-brand);

    color:#fff;

    font-size:1rem;

}

.exec-principle span{

    color:var(--text-secondary);

    line-height:1.8;

    font-size:.98rem;

}


/* ==========================================================
   PRIMARY BUTTON
========================================================== */

.exec-primary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:16px 34px;

    border:none;

    border-radius:12px;

    background:var(--gradient-brand);

    color:#fff;

    font-size:1rem;

    font-weight:600;

    cursor:pointer;

    transition:all .30s ease;

    box-shadow:0 14px 34px rgba(255,122,0,.28);

}

.exec-primary-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 22px 42px rgba(255,122,0,.36);

}

.exec-primary-btn:active{

    transform:translateY(-1px) scale(.98);

}


/* ==========================================================
   SECONDARY BUTTON
========================================================== */

.exec-secondary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 26px;

    border-radius:12px;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.04);

    color:var(--text-primary);

    cursor:pointer;

    transition:all .30s ease;

}

.exec-secondary-btn:hover{

    border-color:rgba(255,176,0,.25);

    background:rgba(255,255,255,.07);

}


/* ==========================================================
   WORKSPACE
========================================================== */

.exec-workspace{

    display:flex;

    flex-direction:column;

    gap:34px;

}


/* ==========================================================
   PROGRESS HEADER
========================================================== */

.exec-progress-header{

    display:flex;

    justify-content:space-between;

    gap:40px;

    align-items:flex-start;

    padding:30px 34px;

    border-radius:24px;

    background:var(--gradient-card);

    border:1px solid var(--glass-border);

    backdrop-filter:blur(18px);

    box-shadow:var(--shadow-md);

}

.exec-progress-info{

    flex:1;

}

.exec-step{

    display:inline-flex;

    padding:6px 16px;

    border-radius:999px;

    background:rgba(255,176,0,.10);

    color:var(--brand-gold);

    font-size:.82rem;

    font-weight:600;

    margin-bottom:14px;

}

.exec-progress-info h2{

    margin-bottom:10px;

    font-size:2rem;

    font-family:'Fraunces','Georgia',serif;

    font-style:italic;

    font-weight:500;

}

.exec-progress-info p{

    color:var(--text-secondary);

    line-height:1.8;

}

.exec-progress-wrapper{

    width:320px;

}

.exec-progress-track{

    height:10px;

    overflow:hidden;

    border-radius:999px;

    background:rgba(255,255,255,.08);

}

.exec-progress-fill{

    position:relative;

    width:25%;

    height:100%;

    border-radius:999px;

    background:var(--gradient-brand);

    transition:width .5s cubic-bezier(.22,1,.36,1);

    overflow:hidden;

}

.exec-progress-fill::after{

    content:'';

    position:absolute;

    inset:0;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transform:translateX(-100%);

    animation:execShimmer 2.2s ease-in-out infinite;

}

/* ==========================================================
   COACH
   Kept deliberately quiet: the avatar and "Coach HRTechify"
   label only appear when a new topic opens (welcome screen,
   or the first question of a step). For every other line —
   acknowledgements between questions — the panel goes
   compact so the same identity isn't repeated on screen
   after screen.
========================================================== */

.exec-coach{

    display:flex;

    align-items:flex-start;

    gap:20px;

    transition:gap .4s ease;

}

.exec-coach-avatar{

    flex-shrink:0;

    overflow:hidden;

    transition:

        opacity .4s ease,

        width .4s ease,

        transform .4s ease;

}

.exec-coach-initials{

    width:56px;

    height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--gradient-brand);

    color:#fff;

    font-size:1.1rem;

    font-weight:600;

    letter-spacing:.06em;

    box-shadow:0 14px 30px rgba(255,122,0,.22);

    animation:execBreathe 4s ease-in-out infinite;

}

.exec-coach-card{

    position:relative;

    flex:1;

    background:var(--gradient-card);

    border:1px solid var(--glass-border);

    border-radius:22px 22px 22px 6px;

    padding:26px 30px;

    backdrop-filter:blur(20px);

    box-shadow:var(--shadow-md);

    transition:border-radius .4s ease;

}

.exec-coach-header{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--text-muted);

    font-family:'Fraunces','Georgia',serif;

    font-style:italic;

    font-size:.92rem;

    font-weight:500;

    letter-spacing:.01em;

    text-transform:none;

    margin-bottom:12px;

    max-height:40px;

    opacity:1;

    overflow:hidden;

    transition:

        max-height .4s ease,

        opacity .3s ease,

        margin .4s ease;

}

.exec-coach-header::before{

    content:'';

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--brand-gold);

    box-shadow:0 0 0 4px rgba(255,176,0,.16);

}

.exec-coach-card p{

    color:var(--text-secondary);

    line-height:1.9;

    font-size:1.04rem;

    font-family:'Fraunces','Georgia',serif;

    font-style:italic;

    font-weight:400;

}

.exec-coach--compact{

    gap:0;

}

.exec-coach--compact .exec-coach-avatar{

    opacity:0;

    width:0;

    transform:scale(.6);

    pointer-events:none;

}

.exec-coach--compact .exec-coach-header{

    max-height:0;

    opacity:0;

    margin-bottom:0;

}

.exec-coach--compact .exec-coach-card{

    border-radius:16px;

}


/* ==========================================================
   CONVERSATION
   Styled as a card that arrives with a soft entrance, not a
   static form panel — accent bar up top, italic serif titles,
   a quoted coach aside instead of a boxed helper strip.
========================================================== */

.exec-conversation-container{

    display:flex;

    flex-direction:column;

}

.exec-conversation-card{

    position:relative;

    background:var(--gradient-card);

    border:1px solid var(--glass-border);

    border-radius:26px;

    padding:44px 42px 42px;

    backdrop-filter:blur(20px);

    box-shadow:var(--shadow-lg);

    overflow:hidden;

}

.exec-conversation-card::before{

    content:'';

    position:absolute;

    top:0;

    left:0;

    right:0;

    height:4px;

    background:var(--gradient-brand);

    background-size:200% 100%;

    animation:execGradientDrift 6s ease-in-out infinite;

}

.exec-question-top{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:30px;

}

.exec-question-icon{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:var(--gradient-brand);

    color:#fff;

    font-size:1.2rem;

    box-shadow:0 12px 26px rgba(255,122,0,.24);

}

.exec-question-title-group{

    flex:1;

}

.exec-question-category{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:8px;

    color:var(--brand-gold);

    font-size:.78rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.12em;

}

.exec-question-category::before{

    content:'';

    width:5px;

    height:5px;

    border-radius:50%;

    background:var(--brand-gold);

}

.exec-question-title-group h2{

    font-family:'Fraunces','Georgia',serif;

    font-style:italic;

    font-weight:500;

    font-size:1.8rem;

    line-height:1.35;

}

.exec-coach-context{

    position:relative;

    margin-bottom:26px;

    padding:20px 28px 20px 46px;

    border-radius:14px;

    background:rgba(255,176,0,.06);

    color:var(--text-secondary);

    font-family:'Fraunces','Georgia',serif;

    font-style:italic;

    line-height:1.9;

}

.exec-coach-context::before{

    content:'\201C';

    position:absolute;

    left:16px;

    top:6px;

    font-family:'Fraunces','Georgia',serif;

    font-size:2.4rem;

    line-height:1;

    color:var(--brand-gold);

    opacity:.55;

}

.exec-question-text{

    font-size:1.26rem;

    font-weight:600;

    line-height:1.7;

    margin-bottom:14px;

}

.exec-question-explanation{

    color:var(--text-secondary);

    line-height:1.8;

    margin-bottom:30px;

}

.exec-question-response{

    display:flex;

    flex-direction:column;

    gap:18px;

}


/* ==========================================================
   INPUTS
   Minimalist underline fields instead of boxed form controls
   — the app should feel like jotting down an answer in
   conversation, not filling out paperwork. Textarea keeps a
   soft box since underlines don't read well multi-line.
========================================================== */

.exec-input,
.exec-select{

    width:100%;

    padding:14px 4px;

    border:none;

    border-bottom:1.5px solid rgba(255,255,255,.16);

    border-radius:0;

    background:transparent;

    color:var(--text-primary);

    font-size:1.05rem;

    transition:

        border-color .30s ease,

        box-shadow .30s ease,

        transform .30s ease;

}

.exec-input:focus,
.exec-select:focus{

    outline:none;

    border-color:var(--brand-gold);

    box-shadow:0 1px 0 0 var(--brand-gold);

    transform:translateY(-1px);

}

.exec-textarea{

    width:100%;

    padding:16px 18px;

    border-radius:14px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.04);

    color:var(--text-primary);

    font-size:1.05rem;

    resize:vertical;

    min-height:140px;

    transition:all .30s ease;

}

.exec-textarea:focus{

    outline:none;

    border-color:rgba(255,176,0,.45);

    box-shadow:0 0 0 3px rgba(255,176,0,.10);

}

.exec-input::placeholder,
.exec-textarea::placeholder{

    color:var(--text-muted);

}

.exec-select option{

    background:#111827;

    color:#fff;

}


/* ==========================================================
   RADIO & CHECKBOX GROUPS
========================================================== */

.exec-radio-group,
.exec-checkbox-group{

    display:grid;

    gap:14px;

}

/* ==========================================================
   STICKY FOOTER
   Rounded into a quiet pill instead of a heavy toolbar block,
   with an italic caption that fades between states rather
   than announcing "{Step} Conversation" in a static label.
========================================================== */

.exec-footer{

    position:sticky;

    bottom:24px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:24px;

    padding:18px 24px;

    border-radius:999px;

    background:rgba(12,18,32,.85);

    backdrop-filter:blur(22px);

    border:1px solid rgba(255,255,255,.07);

    box-shadow:0 18px 40px rgba(0,0,0,.28);

    z-index:100;

}

.exec-footer-message{

    flex:1;

    text-align:center;

    color:var(--text-muted);

    font-family:'Fraunces','Georgia',serif;

    font-style:italic;

    font-size:.88rem;

    font-weight:400;

    letter-spacing:.01em;

}


/* ==========================================================
   REVIEW SCREEN
========================================================== */

.exec-review-screen{

    display:flex;

    justify-content:center;

    align-items:center;

}

.exec-review-card{

    width:100%;

    max-width:980px;

    padding:48px;

    border-radius:28px;

    background:var(--gradient-card);

    border:1px solid var(--glass-border);

    backdrop-filter:blur(22px);

    box-shadow:var(--shadow-lg);

}

.exec-review-card h2{

    margin:18px 0;

    font-family:'Fraunces','Georgia',serif;

    font-style:italic;

    font-weight:500;

}

.exec-review-intro{

    color:var(--text-secondary);

    line-height:1.9;

    margin-bottom:34px;

}

.exec-review-container{

    display:grid;

    gap:20px;

}

.exec-review-item{

    padding:24px;

    border-radius:18px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.06);

}

.exec-review-item h3{

    margin-bottom:10px;

    color:var(--brand-gold);

    font-size:.95rem;

    text-transform:uppercase;

    letter-spacing:.06em;

}

.exec-review-item p{

    color:var(--text-secondary);

    line-height:1.8;

}

.exec-review-actions{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:24px;

    margin-top:42px;

}


/* ==========================================================
   LOADING SCREEN
========================================================== */

.exec-loading-screen{

    display:flex;

    justify-content:center;

    align-items:center;

}

.exec-loading-card{

    width:100%;

    max-width:640px;

    padding:54px;

    text-align:center;

    border-radius:28px;

    background:var(--gradient-card);

    border:1px solid var(--glass-border);

    box-shadow:var(--shadow-lg);

}

.exec-loading-card h2{

    margin:30px 0 18px;

    font-family:'Fraunces','Georgia',serif;

    font-style:italic;

    font-weight:500;

}

.exec-loading-message{

    color:var(--brand-gold);

    font-weight:600;

    min-height:28px;

}


/* ==========================================================
   LOADER
========================================================== */

.exec-loader{

    display:flex;

    justify-content:center;

    gap:10px;

}

.exec-loader span{

    width:14px;

    height:14px;

    border-radius:50%;

    background:var(--brand-gold);

    animation:execPulse 1.2s infinite;

}

.exec-loader span:nth-child(2){

    animation-delay:.2s;

}

.exec-loader span:nth-child(3){

    animation-delay:.4s;

}

@keyframes execPulse{

    0%,80%,100%{

        transform:scale(.45);

        opacity:.35;

    }

    40%{

        transform:scale(1);

        opacity:1;

    }

}

/* ==========================================================
   SUCCESS SCREEN
========================================================== */

.exec-success-screen{

    display:flex;

    justify-content:center;

    align-items:center;

}

.exec-success-card{

    width:100%;

    max-width:640px;

    padding:54px;

    text-align:center;

    border-radius:28px;

    background:var(--gradient-card);

    border:1px solid var(--glass-border);

    backdrop-filter:blur(22px);

    box-shadow:var(--shadow-lg);

}

.exec-success-icon{

    width:96px;

    height:96px;

    margin:0 auto 30px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--gradient-brand);

    color:#fff;

    font-size:2.4rem;

    box-shadow:0 20px 45px rgba(255,122,0,.28);

}

.exec-success-card h2{

    margin-bottom:20px;

    font-family:'Fraunces','Georgia',serif;

    font-style:italic;

    font-weight:500;

}

.exec-success-card p{

    color:var(--text-secondary);

    line-height:1.9;

    margin-bottom:14px;

}



/* ==========================================================
   MODAL
========================================================== */

.exec-modal{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(6,10,18,.78);

    backdrop-filter:blur(10px);

    z-index:2000;

}

.exec-modal-card{

    width:min(520px,92vw);

    padding:42px;

    text-align:center;

    border-radius:26px;

    background:var(--gradient-card);

    border:1px solid var(--glass-border);

    box-shadow:var(--shadow-lg);

}

.exec-modal-icon{

    width:78px;

    height:78px;

    margin:0 auto 24px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,176,0,.10);

    color:var(--brand-gold);

    font-size:1.8rem;

}

.exec-modal-card h2{

    margin-bottom:18px;

}

.exec-modal-card p{

    color:var(--text-secondary);

    line-height:1.8;

}

.exec-modal-actions{

    display:flex;

    justify-content:center;

    gap:16px;

    margin-top:34px;

}



/* ==========================================================
   HELP DRAWER
========================================================== */

.exec-help-drawer{

    position:fixed;

    top:110px;

    right:30px;

    width:360px;

    z-index:1500;

}

.exec-help-card{

    border-radius:22px;

    background:var(--gradient-card);

    border:1px solid var(--glass-border);

    backdrop-filter:blur(18px);

    box-shadow:var(--shadow-lg);

    overflow:hidden;

}

.exec-help-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 24px;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.exec-help-header h3{

    font-size:1rem;

}

.exec-help-close{

    width:36px;

    height:36px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.06);

    color:var(--text-primary);

    cursor:pointer;

    transition:.30s;

}

.exec-help-close:hover{

    background:rgba(255,176,0,.14);

}

.exec-help-content{

    padding:24px;

    color:var(--text-secondary);

    line-height:1.8;

}



/* ==========================================================
   ACCESSIBILITY
========================================================== */

.exec-visually-hidden{

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1200px){

    .exec-container{

        width:min(94%,100%);

    }

}


@media (max-width:992px){

    .exec-main{

        padding-top:120px;

    }

    .exec-landing-card{

        padding:40px;

    }

    .exec-highlights{

        grid-template-columns:1fr;

    }

    .exec-progress-header{

        flex-direction:column;

        gap:28px;

    }

    .exec-progress-wrapper{

        width:100%;

    }

    .exec-coach{

        flex-direction:column;

    }

    .exec-coach--compact{

        flex-direction:row;

    }

    .exec-footer{

        flex-direction:column;

        align-items:stretch;

        gap:18px;

        border-radius:28px;

    }

    .exec-footer-message{

        order:-1;

        text-align:center;

    }

    .exec-review-actions{

        flex-direction:column;

    }

    .exec-review-actions button{

        width:100%;

    }

    .exec-modal-actions{

        flex-direction:column;

    }

    .exec-modal-actions button{

        width:100%;

    }

    .exec-help-drawer{

        position:relative;

        top:auto;

        right:auto;

        width:100%;

    }

}


@media (max-width:768px){

    .exec-main{

        padding-top:105px;

        padding-bottom:70px;

    }

    .exec-shell{

        gap:28px;

    }

    .exec-landing-card{

        padding:30px 24px;

        border-radius:22px;

    }

    .exec-landing-card h1{

        font-size:2rem;

        line-height:1.25;

    }

    .exec-introduction{

        font-size:1rem;

        margin-bottom:28px;

    }

    .exec-highlight{

        padding:18px;

    }

    .exec-principle{

        padding:18px;

    }

    .exec-progress-header{

        padding:24px;

    }

    .exec-step{

        font-size:.78rem;

    }

    .exec-progress-info h2{

        font-size:1.6rem;

    }

    .exec-coach-card{

        padding:24px;

    }

    .exec-conversation-card{

        padding:28px 24px;

    }

    .exec-question-top{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

    }

    .exec-question-title-group h2{

        font-size:1.45rem;

    }

    .exec-question-text{

        font-size:1.15rem;

    }

    .exec-review-card{

        padding:30px 24px;

    }

    .exec-loading-card,

    .exec-success-card{

        padding:36px 26px;

    }

}


@media (max-width:480px){

    .exec-container{

        width:94%;

    }

    .exec-badge{

        font-size:.75rem;

    }

    .exec-primary-btn,

    .exec-secondary-btn{

        width:100%;

        justify-content:center;

    }

    .exec-footer{

        padding:18px;

    }

    .exec-coach-initials{

        width:60px;

        height:60px;

        font-size:1.15rem;

    }

    .exec-question-icon{

        width:56px;

        height:56px;

        font-size:1.1rem;

    }

}

/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes execFadeUp{

    from{

        opacity:0;

        transform:translateY(24px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes execFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes execSlideRight{

    from{

        opacity:0;

        transform:translateX(-30px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes execScale{

    from{

        opacity:0;

        transform:translateY(16px) scale(.97);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

@keyframes execMessageIn{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes execBreathe{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.06);

    }

}

@keyframes execGradientDrift{

    0%,100%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

}

@keyframes execShimmer{

    100%{

        transform:translateX(100%);

    }

}

.exec-landing-card{

    animation:execFadeUp .7s ease;

}

.exec-progress-header{

    animation:execFadeUp .5s ease;

}

.exec-coach{

    animation:execSlideRight .6s ease;

}

.exec-conversation-card{

    animation:execScale .5s cubic-bezier(.22,1,.36,1);

}

.exec-review-card{

    animation:execFadeUp .5s ease;

}

.exec-loading-card{

    animation:execFade .45s ease;

}

.exec-success-card{

    animation:execFadeUp .55s ease;

}

.exec-fade-in{

    animation:execMessageIn .5s cubic-bezier(.22,1,.36,1);

}


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

.exec-workspace,

.exec-review-screen,

.exec-loading-screen,

.exec-success-screen{

    transition:

        opacity .35s ease,

        transform .35s ease;

}


/* ==========================================================
   UTILITIES
========================================================== */

.exec-hidden{

    display:none !important;

}

.exec-flex{

    display:flex;

}

.exec-grid{

    display:grid;

}

.exec-center{

    display:flex;

    align-items:center;

    justify-content:center;

}

.exec-space-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.exec-full-width{

    width:100%;

}

.exec-text-center{

    text-align:center;

}

.exec-mt-16{

    margin-top:16px;

}

.exec-mt-24{

    margin-top:24px;

}

.exec-mt-32{

    margin-top:32px;

}

.exec-mb-16{

    margin-bottom:16px;

}

.exec-mb-24{

    margin-bottom:24px;

}

.exec-mb-32{

    margin-bottom:32px;

}


/* ==========================================================
   SCROLLBAR
========================================================== */

.exec-textarea::-webkit-scrollbar{

    width:8px;

}

.exec-textarea::-webkit-scrollbar-track{

    background:rgba(255,255,255,.04);

    border-radius:999px;

}

.exec-textarea::-webkit-scrollbar-thumb{

    background:rgba(255,176,0,.35);

    border-radius:999px;

}

.exec-textarea::-webkit-scrollbar-thumb:hover{

    background:rgba(255,176,0,.55);

}


/* ==========================================================
   SELECTION
========================================================== */

.exec-page ::selection{

    background:rgba(255,176,0,.25);

    color:#ffffff;

}

/* ==========================================================
   PRINT
========================================================== */

@media print{

    .exec-page{

        background:#ffffff;

        color:#000000;

    }

    .navbar,

    .exec-footer,

    .exec-help-drawer,

    .exec-modal,

    .exec-primary-btn,

    .exec-secondary-btn{

        display:none !important;

    }

    .exec-main{

        padding:0;

    }

    .exec-container{

        width:100%;

        max-width:100%;

    }

    .exec-landing-card,

    .exec-conversation-card,

    .exec-review-card,

    .exec-success-card{

        box-shadow:none;

        border:1px solid #cccccc;

        background:#ffffff;

        page-break-inside:avoid;

    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce){

    .exec-page *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/* ==========================================================
   DARK MODE REFINEMENTS
========================================================== */

@media (prefers-color-scheme: dark){

    .exec-input,

    .exec-select,

    .exec-textarea{

        background:rgba(255,255,255,.05);

    }

}


/* ==========================================================
   FOCUS ACCESSIBILITY
========================================================== */

.exec-primary-btn:focus-visible,

.exec-secondary-btn:focus-visible,

.exec-input:focus-visible,

.exec-select:focus-visible,

.exec-textarea:focus-visible,

.exec-help-close:focus-visible{

    outline:2px solid var(--brand-gold);

    outline-offset:3px;

}


/* ==========================================================
   DISABLED STATES
========================================================== */

.exec-primary-btn:disabled,

.exec-secondary-btn:disabled{

    opacity:.55;

    cursor:not-allowed;

    pointer-events:none;

    transform:none;

    box-shadow:none;

}

.exec-input:disabled,

.exec-select:disabled,

.exec-textarea:disabled{

    opacity:.7;

    cursor:not-allowed;

}


/* ==========================================================
   HIDDEN STATE
========================================================== */

[hidden]{

    display:none !important;

}


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

   Module : Executive Assessment
   File   : css/12-executive-assessment.css
   Version: v1.1.0
========================================================== */