/* /school-match/assets/css/sfi.css */
:root {
    --sfi-ink: #14213a;
    --sfi-deep: #0f192b;
    --sfi-accent: #315ba8;
    --sfi-accent-dark: #284d91;
    --sfi-muted: #687488;
    --sfi-line: #dfe5ee;
    --sfi-soft: #f5f7fb;
    --sfi-white: #fff;
    --sfi-shadow: 0 20px 60px rgba(20,33,58,.08);
}

.sfi-select-page,
.sfi-situation-test-page,
.sfi-basic-test-page {
    background: #fff;
    color: var(--sfi-ink);
}

.sfi-select-main,
.sfi-test-page,
.personality-wrap {
    min-height: calc(100vh - 80px);
    padding: 18px 0 72px;
}

.sfi-select-wrap,
.sfi-test-shell,
.personality-wrap > :not(.schoolmatch-shell) {
    width: min(1100px, calc(100% - 40px));
    margin-right: auto;
    margin-left: auto;
}

.sfi-select-main .schoolmatch-shell,
.sfi-test-page .schoolmatch-shell,
.personality-wrap .schoolmatch-shell {
    width: min(1240px, calc(100% - 40px));
    margin-right: auto;
    margin-left: auto;
}

/* selection hero */
.sfi-select-hero,
.personality-hero {
    margin-top: 18px;
    padding: 54px;
    border: 1px solid #e4e9f1;
    border-radius: 30px;
    background: linear-gradient(135deg,#f8fafc,#eef2f7);
    color: var(--sfi-ink);
    box-shadow: var(--sfi-shadow);
}

.sfi-select-eyebrow,
.personality-hero .eyebrow,
.sfi-test-kicker {
    display: inline-block;
    color: var(--sfi-accent);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
}

.sfi-select-hero h1,
.personality-hero h1 {
    margin: 16px 0 0;
    color: var(--sfi-ink);
    font-size: clamp(38px,5vw,58px);
    line-height: 1.1;
    letter-spacing: -.055em;
}

.sfi-select-hero h1 em,
.personality-hero h1 em {
    color: var(--sfi-accent);
    font-style: normal;
}

.sfi-select-hero p,
.personality-hero p {
    max-width: 760px;
    margin: 20px 0 0;
    color: var(--sfi-muted);
    font-size: 15px;
    line-height: 1.8;
}

.sfi-select-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.sfi-select-hero-meta span,
.sfi-analysis-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    background: #eef3fb;
    color: var(--sfi-accent);
    font-size: 11px;
    font-weight: 800;
}

/* selection cards */
.sfi-select-section {
    margin-top: 28px;
}

.sfi-select-card-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 16px;
}

.sfi-analysis-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 28px;
    border: 1px solid var(--sfi-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(20,33,58,.055);
}

.sfi-analysis-card--recommended {
    background: var(--sfi-deep);
    color: #fff;
}

.sfi-recommended-badge,
.sfi-analysis-type-badge {
    display: inline-flex;
    width: fit-content;
    min-height: 30px;
    align-items: center;
    padding: 0 11px;
    border-radius: 999px;
    background: #eef3fb;
    color: var(--sfi-accent);
    font-size: 11px;
    font-weight: 900;
}

.sfi-analysis-card--recommended .sfi-recommended-badge {
    background: #fff;
    color: var(--sfi-deep);
}

.sfi-analysis-card h2 {
    margin: 18px 0 0;
    color: var(--sfi-ink);
    font-size: 28px;
    line-height: 1.3;
    letter-spacing: -.04em;
}

.sfi-analysis-card--recommended h2 {
    color: #fff;
}

.sfi-card-subtitle {
    margin-top: 8px;
    color: #526078;
    font-size: 14px;
    font-weight: 800;
}

.sfi-analysis-card--recommended .sfi-card-subtitle,
.sfi-analysis-card--recommended .sfi-card-description,
.sfi-analysis-card--recommended .sfi-analysis-point span,
.sfi-analysis-card--recommended .sfi-card-note {
    color: #c5cfdd;
}

.sfi-card-description {
    margin: 18px 0 0;
    color: var(--sfi-muted);
    font-size: 14px;
    line-height: 1.75;
}

.sfi-analysis-points {
    display: grid;
    gap: 9px;
    margin-top: 22px;
}

.sfi-analysis-point {
    padding: 15px;
    border: 1px solid var(--sfi-line);
    border-radius: 15px;
    background: #f8fafc;
}

.sfi-analysis-card--recommended .sfi-analysis-point {
    border-color: rgba(255,255,255,.1);
    background: rgba(255,255,255,.06);
}

.sfi-analysis-point strong {
    display: block;
    color: var(--sfi-ink);
    font-size: 13px;
}

.sfi-analysis-card--recommended .sfi-analysis-point strong {
    color: #fff;
}

.sfi-analysis-point span {
    display: block;
    margin-top: 5px;
    color: var(--sfi-muted);
    font-size: 12px;
    line-height: 1.6;
}

.sfi-analysis-card__footer {
    margin-top: auto;
    padding-top: 24px;
}

.sfi-analysis-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 14px;
}

.sfi-analysis-card--recommended .sfi-analysis-meta span {
    background: rgba(255,255,255,.08);
    color: #d8e0ec;
}

.sfi-btn,
.btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 19px;
    border: 0;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.sfi-btn-primary,
.btn-primary {
    background: var(--sfi-accent);
    color: #fff;
}

.sfi-analysis-card--recommended .sfi-btn-primary {
    background: #fff;
    color: var(--sfi-deep);
}

.sfi-btn-light,
.btn-muted {
    border: 1px solid var(--sfi-line);
    background: #fff;
    color: var(--sfi-ink);
}

.sfi-analysis-card__footer .sfi-btn {
    width: 100%;
}

.sfi-card-note {
    margin: 12px 0 0;
    color: var(--sfi-muted);
    font-size: 12px;
    line-height: 1.55;
}

.sfi-compare-section,
.sfi-note-section,
.personality-card,
.personality-status-card {
    margin-top: 24px;
    padding: 26px;
    border: 1px solid var(--sfi-line);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(20,33,58,.045);
}

.sfi-compare-section h2 {
    margin: 0;
    font-size: 22px;
}

.sfi-compare-table-wrap {
    overflow-x: auto;
    margin-top: 16px;
}

.sfi-compare-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
}

.sfi-compare-table th,
.sfi-compare-table td {
    padding: 14px 15px;
    border-bottom: 1px solid var(--sfi-line);
    text-align: left;
    font-size: 13px;
}

.sfi-compare-table th {
    background: #f7f9fc;
    color: var(--sfi-ink);
}

.sfi-compare-table td {
    color: var(--sfi-muted);
}

.sfi-note-section {
    background: #f4f7fc;
    color: var(--sfi-muted);
    font-size: 13px;
    line-height: 1.75;
}

.sfi-note-section strong {
    color: var(--sfi-ink);
}

.sfi-detail-link {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.sfi-detail-link a {
    color: var(--sfi-accent);
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

/* situation test */
.sfi-test-shell {
    width: min(900px, calc(100% - 40px));
    margin-top: 28px;
}

.sfi-test-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.sfi-test-head h1 {
    margin: 8px 0 0;
    color: var(--sfi-ink);
    font-size: 34px;
    letter-spacing: -.04em;
}

.sfi-test-head p {
    margin: 8px 0 0;
    color: var(--sfi-muted);
    font-size: 13px;
    line-height: 1.6;
}

.sfi-exit-btn {
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--sfi-line);
    border-radius: 12px;
    background: #fff;
    color: var(--sfi-ink);
    font-weight: 800;
    cursor: pointer;
}

.sfi-progress-panel,
.sfi-question-card,
.sfi-empty-box {
    border: 1px solid var(--sfi-line);
    background: #fff;
    box-shadow: 0 12px 34px rgba(20,33,58,.055);
}

.sfi-progress-panel {
    padding: 16px 18px;
    border-radius: 17px;
}

.sfi-progress-copy {
    display:flex;
    justify-content:space-between;
    color:var(--sfi-muted);
    font-size:12px;
    font-weight:800;
}

.sfi-progress-copy strong {
    color: var(--sfi-accent);
}

.sfi-progress-track {
    height: 8px;
    margin-top: 11px;
    overflow:hidden;
    border-radius:999px;
    background:#e9edf4;
}

.sfi-progress-bar {
    width:0;
    height:100%;
    border-radius:inherit;
    background:var(--sfi-accent);
    transition:width .2s ease;
}

.sfi-question-card {
    margin-top: 16px;
    padding: 30px;
    border-radius: 23px;
}

.sfi-question-number {
    display:inline-flex;
    min-height:29px;
    align-items:center;
    padding:0 10px;
    border-radius:999px;
    background:#eef3fb;
    color:var(--sfi-accent);
    font-size:11px;
    font-weight:900;
}

.sfi-situation-box {
    margin-top:20px;
    padding:20px 22px;
    border-left:3px solid var(--sfi-accent);
    border-radius:0 14px 14px 0;
    background:#f6f8fc;
}

.sfi-situation-label {
    display:block;
    margin-bottom:7px;
    color:var(--sfi-muted);
    font-size:11px;
    font-weight:900;
}

.sfi-situation-text {
    margin:0;
    color:#2c3950;
    font-size:16px;
    line-height:1.75;
    font-weight:700;
}

.sfi-question-prompt {
    margin:23px 0 0;
    color:var(--sfi-ink);
    font-size:21px;
    line-height:1.45;
}

.sfi-choice-list {
    display:grid;
    gap:10px;
    margin-top:20px;
}

.sfi-choice {
    display:grid;
    grid-template-columns:32px minmax(0,1fr);
    gap:12px;
    align-items:center;
    min-height:58px;
    padding:12px 15px;
    border:1px solid var(--sfi-line);
    border-radius:14px;
    background:#fff;
    cursor:pointer;
}

.sfi-choice.is-selected {
    border-color:var(--sfi-accent);
    background:#f2f6fc;
    box-shadow:0 0 0 2px rgba(49,91,168,.08);
}

.sfi-choice input {
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.sfi-choice-number {
    display:flex;
    width:30px;
    height:30px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#eef1f5;
    color:#526078;
    font-size:12px;
    font-weight:900;
}

.sfi-choice.is-selected .sfi-choice-number {
    background:var(--sfi-accent);
    color:#fff;
}

.sfi-choice-text {
    color:#3d495e;
    font-size:14px;
    line-height:1.55;
    font-weight:700;
}

.sfi-question-footer {
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-top:23px;
}

.sfi-nav-btn {
    min-height:46px;
    padding:0 18px;
    border:0;
    border-radius:12px;
    font-weight:900;
    cursor:pointer;
}

.sfi-nav-btn:disabled {
    opacity:.45;
    cursor:not-allowed;
}

.sfi-nav-prev {
    background:#eef1f5;
    color:var(--sfi-ink);
}

.sfi-nav-next {
    margin-left:auto;
    background:var(--sfi-accent);
    color:#fff;
}

.sfi-save-note {
    margin:13px 0 0;
    text-align:center;
    color:#8a94a4;
    font-size:11px;
}

.sfi-hidden { display:none !important; }

.sfi-processing-overlay {
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(15,25,43,.64);
    backdrop-filter:blur(8px);
}

.sfi-processing-card {
    width:min(430px,100%);
    padding:32px 27px;
    border-radius:24px;
    background:#fff;
    text-align:center;
}

.sfi-processing-spinner {
    width:46px;
    height:46px;
    margin:0 auto 17px;
    border:4px solid #e5eaf2;
    border-top-color:var(--sfi-accent);
    border-radius:50%;
    animation:sfi-spin .8s linear infinite;
}

.sfi-processing-steps {
    display:grid;
    gap:8px;
    margin-top:20px;
    text-align:left;
}

.sfi-processing-steps span {
    padding:10px 12px;
    border-radius:10px;
    background:#f4f6fa;
    color:#7b8595;
    font-size:12px;
    font-weight:800;
}

.sfi-processing-steps span.is-active {
    background:#eef3fb;
    color:var(--sfi-accent);
}

@keyframes sfi-spin { to { transform:rotate(360deg); } }

/* self assessment */
.personality-wrap {
    max-width:none;
    margin:0;
}

.personality-status-card {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
}

.personality-status-card strong {
    display:block;
    color:var(--sfi-ink);
}

.personality-status-card span {
    display:block;
    margin-top:5px;
    color:var(--sfi-muted);
    font-size:12px;
}

.field label {
    display:block;
    margin-bottom:7px;
    color:var(--sfi-ink);
    font-size:12px;
    font-weight:800;
}

.field select {
    width:100%;
    height:44px;
    padding:0 12px;
    border:1px solid var(--sfi-line);
    border-radius:12px;
    background:#fff;
}

.question-progress {
    position:sticky;
    top:78px;
    z-index:20;
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:20px;
    margin-bottom:16px;
    padding:12px 15px;
    border:1px solid var(--sfi-line);
    border-radius:14px;
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(10px);
}

.question-progress-bar {
    flex:1;
    height:7px;
    overflow:hidden;
    border-radius:999px;
    background:#e8edf4;
}

.question-progress-bar i {
    display:block;
    width:0;
    height:100%;
    background:var(--sfi-accent);
}

.question-group {
    margin-top:16px;
}

.question-item {
    margin-bottom:12px;
    padding:20px;
    border:1px solid var(--sfi-line);
    border-radius:18px;
    background:#fff;
}

.question-title {
    margin-bottom:12px;
    color:var(--sfi-ink);
    font-weight:800;
    line-height:1.6;
}

.question-help {
    margin-bottom:12px;
    color:var(--sfi-muted);
    font-size:12px;
}

.likert {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:8px;
}

.likert label {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    padding:10px 6px;
    border:1px solid var(--sfi-line);
    border-radius:12px;
    color:#59667b;
    font-size:11px;
    cursor:pointer;
}

.likert label:has(input:checked) {
    border-color:var(--sfi-accent);
    background:#eef3fb;
    color:var(--sfi-accent);
    font-weight:800;
}

.saved-answer-note {
    padding:13px 15px;
    border:1px solid #d7e1f0;
    border-radius:13px;
    background:#f4f7fc;
    color:#526078;
    font-size:12px;
}

.submit-bar {
    position:sticky;
    bottom:0;
    display:flex;
    gap:10px;
    justify-content:flex-end;
    margin-top:18px;
    padding:13px;
    border:1px solid var(--sfi-line);
    border-radius:16px;
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(10px);
}

.submit-help {
    margin-right:auto;
    align-self:center;
    color:var(--sfi-muted);
    font-size:12px;
}

.empty,
.sfi-empty-box {
    padding:30px;
    border:1px dashed #ccd4df;
    border-radius:18px;
    background:#fafbfc;
    color:var(--sfi-muted);
    text-align:center;
}

@media (max-width: 860px) {
    .sfi-select-card-grid {
        grid-template-columns:1fr;
    }
}

@media (max-width: 720px) {
    .sfi-select-main,
    .sfi-test-page,
    .personality-wrap {
        padding-top:12px;
    }

    .sfi-select-wrap,
    .sfi-test-shell,
    .personality-wrap > :not(.schoolmatch-shell),
    .sfi-select-main .schoolmatch-shell,
    .sfi-test-page .schoolmatch-shell,
    .personality-wrap .schoolmatch-shell {
        width:min(100% - 24px,1100px);
    }

    .sfi-select-hero,
    .personality-hero {
        margin-top:12px;
        padding:28px 22px;
        border-radius:22px;
    }

    .sfi-select-hero h1,
    .personality-hero h1 {
        font-size:34px;
    }

    .sfi-analysis-card {
        padding:22px;
        border-radius:21px;
    }

    .sfi-compare-section,
    .sfi-note-section {
        padding:21px 18px;
    }

    .sfi-test-head {
        flex-direction:column;
    }

    .sfi-question-card {
        padding:22px 17px;
        border-radius:20px;
    }

    .sfi-question-footer {
        align-items:stretch;
    }

    .sfi-nav-btn {
        flex:1;
    }

    .personality-status-card {
        align-items:stretch;
        flex-direction:column;
    }

    .likert {
        grid-template-columns:1fr;
    }

    .likert label {
        flex-direction:row;
        justify-content:flex-start;
    }

    .question-progress {
        top:8px;
        flex-wrap:wrap;
    }

    .question-progress-bar {
        order:3;
        flex-basis:100%;
    }

    .submit-bar {
        position:static;
        flex-direction:column;
    }

    .btn {
        width:100%;
    }
}


/* =========================================================
   SFI usability fix v4.1
   - Keep the question action buttons visible
   - Reduce desktop vertical height
   - Keep self-assessment progress visible while scrolling
========================================================= */

/* Situation-type test: denser desktop layout */
@media (min-width: 721px) {
    .sfi-test-page {
        padding-bottom: 42px;
    }

    .sfi-test-shell {
        margin-top: 18px;
    }

    .sfi-test-head {
        margin-bottom: 12px;
    }

    .sfi-test-head h1 {
        font-size: 31px;
    }

    .sfi-test-head p {
        margin-top: 5px;
    }

    .sfi-progress-panel {
        padding: 13px 16px;
    }

    .sfi-progress-track {
        margin-top: 8px;
    }

    .sfi-question-card {
        margin-top: 12px;
        padding: 22px 26px 18px;
    }

    .sfi-situation-box {
        margin-top: 14px;
        padding: 15px 18px;
    }

    .sfi-situation-label {
        margin-bottom: 5px;
    }

    .sfi-situation-text {
        font-size: 15px;
        line-height: 1.58;
    }

    .sfi-question-prompt {
        margin-top: 16px;
        font-size: 19px;
    }

    .sfi-choice-list {
        gap: 8px;
        margin-top: 14px;
    }

    .sfi-choice {
        min-height: 48px;
        padding: 9px 13px;
    }

    .sfi-choice-text {
        font-size: 13px;
        line-height: 1.4;
    }

    .sfi-question-footer {
        position: sticky;
        bottom: 10px;
        z-index: 8;
        margin-top: 14px;
        padding: 10px;
        border: 1px solid var(--sfi-line);
        border-radius: 14px;
        background: rgba(255,255,255,.96);
        box-shadow: 0 10px 28px rgba(20,33,58,.10);
        backdrop-filter: blur(10px);
    }

    .sfi-nav-btn {
        min-height: 42px;
    }

    .sfi-save-note {
        margin-top: 9px;
    }
}

/* Situation-type test: next/previous controls remain reachable on mobile */
@media (max-width: 720px) {
    .sfi-test-shell {
        margin-top: 18px;
    }

    .sfi-question-card {
        padding-bottom: 14px;
    }

    .sfi-question-footer {
        position: sticky;
        bottom: 8px;
        z-index: 8;
        margin-top: 16px;
        padding: 9px;
        border: 1px solid var(--sfi-line);
        border-radius: 14px;
        background: rgba(255,255,255,.97);
        box-shadow: 0 10px 26px rgba(20,33,58,.12);
        backdrop-filter: blur(10px);
    }

    .sfi-nav-btn {
        min-height: 44px;
    }
}

/* Self-assessment: progress bar remains below the global header */
.sfi-basic-test-page .question-progress {
    position: sticky !important;
    top: 86px !important;
    z-index: 80 !important;
    box-shadow: 0 10px 28px rgba(20,33,58,.10);
}

@media (max-width: 720px) {
    .sfi-basic-test-page .question-progress {
        top: 70px !important;
    }
}