/* ================================================================
   Seren — Self-Evolving Reflective Engine Network - Quiz Styles
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

.tie-quiz {
    --tie-bg:      #FAFAFA;
    --tie-surface: #FFFFFF;
    --tie-border:  #E8E8ED;
    --tie-text:    #1A1A2E;
    --tie-muted:   #6B7280;
    --tie-accent:  #2563EB;
    --tie-radius:  10px;
    --tie-shadow:  0 4px 16px rgba(0,0,0,.10);

    font-family:   'DM Sans', system-ui, sans-serif;
    color:         var(--tie-text);
    max-width:     580px;
    margin:        2rem auto;
    background:    var(--tie-surface);
    border:        1px solid var(--tie-border);
    border-radius: 16px;
    overflow:      hidden;
    box-shadow:    var(--tie-shadow);
}

.tie-quiz * { box-sizing: border-box; margin: 0; padding: 0; }

/* Header */
.tie-quiz-header {
    display:     flex;
    align-items: center;
    gap:         14px;
    padding:     24px 28px 20px;
    border-bottom: 1px solid var(--tie-border);
}

.tie-quiz-mark {
    font-size:  28px;
    color:      var(--tie-accent);
    flex-shrink:0;
}

.tie-quiz-header h2 {
    font-size:   17px;
    font-weight: 600;
    color:       var(--tie-text);
    letter-spacing:-.01em;
}

.tie-quiz-header p {
    font-size:  12px;
    color:      var(--tie-muted);
    margin-top: 2px;
}

/* Progress bar */
.tie-quiz-progress {
    height:     4px;
    background: #F1EFE8;
    overflow:   hidden;
}

.tie-quiz-bar {
    height:     100%;
    background: var(--tie-accent);
    transition: width .4s ease;
}

/* Steps */
.tie-quiz-step {
    padding:   28px;
    animation: tieFadeIn .3s ease;
}

@keyframes tieFadeIn {
    from { opacity:0; transform:translateY(8px); }
    to   { opacity:1; transform:translateY(0); }
}

.tie-quiz-qnum {
    font-size:      10px;
    font-weight:    500;
    letter-spacing: .12em;
    color:          var(--tie-muted);
    text-transform: uppercase;
    font-family:    'DM Mono', monospace;
    margin-bottom:  10px;
}

.tie-quiz-question {
    font-size:     18px;
    font-weight:   500;
    color:         var(--tie-text);
    line-height:   1.4;
    margin-bottom: 24px;
    letter-spacing:-.01em;
}

/* Options */
.tie-quiz-options {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    margin-bottom:  28px;
}

.tie-quiz-option {
    display:       flex;
    align-items:   flex-start;
    gap:           12px;
    padding:       14px 16px;
    border:        1px solid var(--tie-border);
    border-radius: var(--tie-radius);
    cursor:        pointer;
    transition:    all .15s;
    background:    var(--tie-bg);
}

.tie-quiz-option:hover {
    border-color: var(--tie-accent);
    background:   #EFF6FF;
}

.tie-quiz-option input[type="radio"] {
    display: none;
}

.tie-option-marker {
    width:         18px;
    height:        18px;
    border:        2px solid var(--tie-border);
    border-radius: 50%;
    flex-shrink:   0;
    margin-top:    2px;
    transition:    all .15s;
    position:      relative;
}

.tie-quiz-option:has(input:checked) {
    border-color: var(--tie-accent);
    background:   #EFF6FF;
}

.tie-quiz-option:has(input:checked) .tie-option-marker {
    border-color: var(--tie-accent);
    background:   var(--tie-accent);
}

.tie-quiz-option:has(input:checked) .tie-option-marker::after {
    content:      '';
    position:     absolute;
    width:        6px;
    height:       6px;
    background:   #fff;
    border-radius:50%;
    top:          50%;
    left:         50%;
    transform:    translate(-50%, -50%);
}

.tie-option-text {
    font-size:  14px;
    color:      var(--tie-text);
    line-height:1.5;
}

/* Nav */
.tie-quiz-nav {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
}

.tie-btn-prev {
    background: none;
    border:     none;
    font-size:  13px;
    color:      var(--tie-muted);
    cursor:     pointer;
    font-family:'DM Sans', sans-serif;
    padding:    8px 0;
    transition: color .15s;
}

.tie-btn-prev:hover { color: var(--tie-text); }

.tie-btn-next,
.tie-btn-submit {
    background:    var(--tie-accent);
    color:         #fff;
    border:        none;
    border-radius: var(--tie-radius);
    padding:       11px 22px;
    font-size:     14px;
    font-weight:   500;
    font-family:   'DM Sans', sans-serif;
    cursor:        pointer;
    transition:    all .2s;
}

.tie-btn-next:hover,
.tie-btn-submit:hover { background: #1D4ED8; }

.tie-btn-next:disabled,
.tie-btn-submit:disabled {
    background: #D1D5DB;
    cursor:     not-allowed;
}

/* Result screen */
.tie-quiz-result {
    padding:    36px 28px;
    text-align: center;
    animation:  tieFadeIn .4s ease;
}

.tie-result-icon {
    font-size:   40px;
    color:       var(--tie-accent);
    margin-bottom:16px;
}

.tie-result-name {
    font-size:     24px;
    font-weight:   600;
    color:         var(--tie-text);
    margin-bottom: 6px;
    letter-spacing:-.02em;
}

.tie-result-tagline {
    font-size:     14px;
    color:         var(--tie-muted);
    font-style:    italic;
    margin-bottom: 18px;
}

.tie-result-description {
    font-size:     14px;
    color:         var(--tie-text);
    line-height:   1.65;
    text-align:    left;
    background:    var(--tie-bg);
    border:        1px solid var(--tie-border);
    border-radius: var(--tie-radius);
    padding:       16px 18px;
    margin-bottom: 18px;
}

.tie-result-meta {
    display:       flex;
    gap:           12px;
    margin-bottom: 28px;
    text-align:    left;
}

.tie-result-strengths,
.tie-result-watch {
    flex:          1;
    background:    var(--tie-bg);
    border:        1px solid var(--tie-border);
    border-radius: var(--tie-radius);
    padding:       14px 16px;
}

.tie-result-strengths::before {
    content:       'Your strengths';
    display:       block;
    font-size:     10px;
    font-weight:   600;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:         #059669;
    margin-bottom: 8px;
    font-family:   'DM Mono', monospace;
}

.tie-result-watch::before {
    content:       'Watch out for';
    display:       block;
    font-size:     10px;
    font-weight:   600;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:         #D97706;
    margin-bottom: 8px;
    font-family:   'DM Mono', monospace;
}

.tie-result-strengths p,
.tie-result-watch p {
    font-size:  13px;
    color:      var(--tie-muted);
    line-height:1.5;
}

.tie-btn-continue {
    background:    var(--tie-text);
    color:         #fff;
    border:        none;
    border-radius: var(--tie-radius);
    padding:       14px 28px;
    font-size:     15px;
    font-weight:   500;
    font-family:   'DM Sans', sans-serif;
    cursor:        pointer;
    transition:    all .2s;
}

.tie-btn-continue:hover {
    background:  #2D3561;
    transform:   translateY(-1px);
}

@media (max-width: 520px) {
    .tie-quiz-step  { padding: 20px; }
    .tie-quiz-header{ padding: 18px 20px; }
    .tie-result-meta{ flex-direction: column; }
    .tie-quiz-result{ padding: 28px 20px; }
}

/* ── Seren sign-off ────────────────────────────────────────────── */
.tie-seren-signoff {
    font-size:   13px;
    color:       var(--tie-muted);
    text-align:  center;
    margin-top:  20px;
    font-style:  normal;
    border-top:  1px solid var(--tie-border);
    padding-top: 16px;
}

.tie-seren-signoff em {
    font-style:  italic;
    color:       var(--tie-accent);
    font-weight: 500;
}