/* ================================================
   Screening Quiz — modern UI
   Scope to wrapper to avoid global collisions
   ================================================= */


/* Design tokens (easy to theme) */

:root {
    --sq-bg: #0f1221;
    /* background behind cards (from your screenshots vibe) */
    --sq-card: #151a2d;
    /* card background */
    --sq-card-2: #10142a;
    /* secondary panel background */
    --sq-text: #e7eaf6;
    /* primary text */
    --sq-text-dim: #a8b0ca;
    /* secondary text */
    --sq-accent: #7a9dff;
    /* primary accent */
    --sq-accent-2: #a8b93a;
    /* secondary accent (success) */
    --sq-danger: #ff6b6b;
    /* error / danger */
    --sq-border: rgba(255, 255, 255, .08);
    --sq-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    --sq-radius: 18px;
    --sq-radius-sm: 12px;
    --sq-gap: clamp(16px, 2vw, 24px);
    --sq-pad: clamp(16px, 2.4vw, 28px);
    --sq-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --sq-focus: 0 0 0 3px rgba(122, 157, 255, .45), 0 0 0 6px rgba(122, 157, 255, .15);
}

body {
  font-family: "Poppins", Helvetica, Arial, sans-serif;
}


/* Dark-mode friendly: inherit variables if site uses prefers-color-scheme */

@media (prefers-color-scheme: light) {
     :root {
        --sq-bg: #f7f9ff;
        --sq-card: #ffffff;
        --sq-card-2: #f3f6ff;
        --sq-text: #0b1020;
        --sq-text-dim: #4e5a7a;
        --sq-border: rgba(0, 0, 0, .08);
        --sq-shadow: 0 10px 24px rgba(10, 16, 34, .08);
    }
}


/* Page background (only inside wrapper to avoid global bleed) */

.screening-quiz-wrapper {
    font-family: var(--sq-font);
    color: var(--sq-text);
}

.screening-quiz-wrapper :where(h1, h2, h3, h4) {
    color: var(--sq-text);
}


/* ============= HUD (stats) ============= */

.screening-hud {
    margin: 0 0 var(--sq-gap) 0;
}

.screening-hud .hud-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sq-gap);
}

.screening-hud .hud-card {
    background: var(--sq-card);
    border: 1px solid var(--sq-border);
    border-radius: var(--sq-radius);
    padding: var(--sq-pad);
    box-shadow: var(--sq-shadow);
}

.screening-hud .hud-number {
    display: block;
    font-size: clamp(24px, 3.4vw, 32px);
    font-weight: 700;
    line-height: 1.1;
}

.screening-hud .hud-label {
    margin-top: 6px;
    font-size: 0.95rem;
    color: var(--sq-text-dim);
}


/* ============= Question card ============= */

#quiz-question .quiz-step,
#quiz-question .quiz-card {
    background: var(--sq-card);
    border: 1px solid var(--sq-border);
    border-radius: var(--sq-radius);
    box-shadow: var(--sq-shadow);
    padding: var(--sq-pad);
}

#quiz-question .step-title {
    font-size: clamp(20px, 2.6vw, 26px);
    margin: 0 0 10px 0;
    line-height: 1.5;
}

#quiz-question .step-desc {
    color: var(--sq-text-dim);
    margin: 0 0 14px 0;
}


/* Composite layout (Q4.1 + Q4.2) */

#quiz-question .composite-qwrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sq-gap);
}

@media (min-width: 900px) {
    #quiz-question .composite-qwrap {
        grid-template-columns: repeat(2, 1fr);
    }
}

#quiz-question fieldset.composite-q {
    background: var(--sq-card-2);
    border: 1px solid var(--sq-border);
    border-radius: var(--sq-radius-sm);
    padding: calc(var(--sq-pad) - 6px);
}

#quiz-question fieldset.composite-q legend {
    padding: 0 6px;
    font-weight: 600;
    color: var(--sq-text);
    margin-bottom: 10px;
}


/* ============= Options ============= */




/* ============= Toggle-style radios ============= */

.form-check {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0px 0;
}


/* Hide native */



/* Style label as toggle pill */

.form-check input[type="radio"]+label {
    position: relative;
    padding-left: 60px;
    cursor: pointer;
    font-weight: 600;
    color: var(--sq-text);
    font-size: 20px;
    margin-top: 2px;
    line-height: 1.35;
}


/* Toggle track */

.form-check input[type="radio"]+label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 34px;
    border-radius: 50px;
    background: #f1f1f1;
    transition: background-color .25s ease, border-color .25s ease;
}


/* Toggle knob */

.form-check input[type="radio"]+label::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    transition: left .25s ease;
}


/* Active state */

.form-check input[type="radio"]:checked+label::before {
    background: var(--sq-accent-2);
    /* use your success green */
    border-color: var(--sq-accent-2);
}

.form-check input[type="radio"]:checked+label::after {
    left: 22px;
}


/* Keyboard focus */

.form-check input[type="radio"]:focus+label::before {
    box-shadow: var(--sq-focus);
}


/* Labels */

.form-check label {
    color: var(--sq-text);
    line-height: 1.35;
    cursor: pointer;
}

.form-check small,
.form-help {
    color: var(--sq-text-dim);
}


/* ============= Actions ============= */

.actions {
    display: inline-flex;
    gap: 12px;
    margin-top: 18px;
    flex-direction: row;
}

.actions .btn {
    appearance: none;
    border: 0;
    border-radius: 999px;
    background: var(--sq-accent);
    color: #fff;
    padding: 12px 20px;
    font-weight: 600;
    letter-spacing: .2px;
    line-height: 1;
    transition: transform .05s ease, box-shadow .15s ease, background-color .15s ease;
    box-shadow: 0 8px 18px rgba(122, 157, 255, .3);
}

.actions .btn:hover {
    filter: brightness(1.06);
}

.actions .btn:active {
    transform: translateY(1px);
}

.actions .btn-secondary {
    background: transparent;
    color: var(--sq-text);
    border: 1px solid var(--sq-border);
    box-shadow: none;
}


/* ============= Completion message ============= */

.quiz-complete {
    text-align: center;
    padding: calc(var(--sq-pad) * 1.5);
    color: var(--sq-text);
    background: var(--sq-card);
    border-radius: var(--sq-radius);
    border: 1px solid var(--sq-border);
    box-shadow: var(--sq-shadow);
}


/* ============= Utilities & accessibility ============= */

#quiz-question :is(input, button, a):focus-visible {
    outline: none;
    box-shadow: var(--sq-focus);
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}


/* Responsive tweaks */

@media (max-width: 680px) {
    .actions {
        flex-direction: row;
        display: inline-flex;
        gap: 12px;
    }
}


/* Optional: make the outer page blend */

body.path-quiz,
.page-quiz {
    background: var(--sq-bg);
}

#tns-summary {
    margin-top: 16px;
}

#tns-summary table {
    width: 100%;
    border-collapse: collapse;
}

#tns-summary td p,
#tns-summary th p {
    margin: 0px
}

#tns-summary th,
#tns-summary td {
    border-bottom: 1px solid #dedede;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
    font-size: 16px;
}

#tns-summary thead {
    background: rgba(0, 0, 0, .05);
}