/* assets/css/pathform.css
 * "فرم طراحی مسیر تحصیلی" — the adaptive path-design wizard and its report.
 * Depends on tokens.css + talent.css (.ds-* components) and reuses the quiz
 * shell from quiz.css (.quiz-page / .quiz-top-bar / .quiz-card / .quiz-nav /
 * .ds-progress / .quiz-loading) so both flows off the step-1 choice feel like
 * one product. This file only adds what the wizard needs beyond a single
 * Likert question: section tags, multi-select chips, searchable lists,
 * number fields, the early-exit gate screen, and the result page.
 */

/* ═══════════════════════ Wizard: question chrome ═══════════════════════ */
/* Illustrated per-question icon (assets/icons/pathform/*.png), set beside the
   section tag + title rather than squeezed into the small pill — the artwork
   has too much detail to read at 16-20px. */
.pf-question-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}
.pf-question-icon {
    width: 60px;
    height: 60px;
    flex: none;
    object-fit: contain;
    border-radius: var(--radius-lg);
}
.pf-question-head__text {
    min-width: 0;
    flex: 1;
}
.pf-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-caption-size);
    font-weight: 700;
    color: var(--color-purple-700);
    background: var(--color-purple-100);
    border-radius: var(--radius-pill);
    padding: 3px 12px;
    margin-bottom: var(--space-3);
}
.pf-subtitle {
    display: block;
    font-size: var(--text-sm-size);
    font-weight: 500;
    color: var(--color-text-3);
    margin-top: -4px;
    margin-bottom: var(--space-5);
}

/* ═══════════════════════ Single-choice list (radio) ═══════════════════════ */
.pf-option-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.pf-option {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
    user-select: none;
}
.pf-option:hover { border-color: var(--color-primary); background: var(--color-navy-100); }
.pf-option.is-selected { border-color: var(--color-primary); background: var(--color-navy-100); box-shadow: var(--shadow-sm); }
.pf-option__mark {
    width: 20px; height: 20px; border-radius: 50%; flex: none; box-sizing: border-box;
    border: 2px solid var(--color-border-strong); background: var(--color-surface);
    display: grid; place-items: center; transition: border-color var(--dur-fast) var(--ease);
}
.pf-option__mark::after {
    content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary);
    transform: scale(0); transition: transform var(--dur-fast) var(--ease);
}
.pf-option.is-selected .pf-option__mark { border-color: var(--color-primary); }
.pf-option.is-selected .pf-option__mark::after { transform: scale(1); }
.pf-option__label { font-size: var(--text-body-size); color: var(--color-text); }
.pf-option.is-selected .pf-option__label { font-weight: 700; color: var(--color-navy-700); }

/* Multi-select uses the same list but a square check mark. */
.pf-option--multi .pf-option__mark { border-radius: var(--radius-sm); }
.pf-option--multi .pf-option__mark::after {
    width: 10px; height: 6px; border-radius: 0; background: transparent;
    border-inline-start: 2.5px solid var(--color-primary); border-block-end: 2.5px solid var(--color-primary);
    transform: scale(0) rotate(-45deg); margin-top: -2px;
}
.pf-option--multi.is-selected .pf-option__mark::after { transform: scale(1) rotate(-45deg); }

/* ═══════════════════════ Compact multi-select chips ═══════════════════════ */
.pf-chip-group { display: flex; flex-wrap: wrap; gap: 10px; }
.pf-chip {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
    padding: 9px 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--color-border-strong);
    background: var(--color-surface); color: var(--color-text); font-size: var(--text-sm-size); font-weight: 600;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pf-chip:hover { border-color: var(--color-primary); }
.pf-chip.is-selected { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-text-inverse); }
.pf-chip.is-disabled { opacity: 0.4; cursor: default; }

/* Search box above a long chip list (majors, universities, cities). */
.pf-search { position: relative; margin-bottom: var(--space-4); }
.pf-search .ds-input { padding-inline-start: 40px; }
.pf-search__icon { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--color-text-3); pointer-events: none; }
.pf-chip-scroll { max-height: 280px; overflow-y: auto; padding: 2px; margin: 0 -2px; }
.pf-chip-empty { color: var(--color-text-3); font-size: var(--text-sm-size); padding: var(--space-4) 0; text-align: center; }

.pf-selected-count {
    display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--space-3);
    font-size: var(--text-caption-size); font-weight: 700; color: var(--color-navy-600);
    background: var(--color-navy-100); border-radius: var(--radius-pill); padding: 3px 12px;
}
.pf-selected-count.is-full { color: var(--color-orange-700); background: var(--color-orange-100); }

/* ═══════════════════════ Number input ═══════════════════════ */
.pf-number-field { max-width: 260px; }
.pf-number-field input[type="number"] { text-align: center; font-weight: 700; font-size: 1.15rem; }

/* ═══════════════════════ Early-exit gate screen ═══════════════════════ */
.pf-gate { text-align: center; padding: var(--space-4) 0; }
.pf-gate__icon {
    width: 72px; height: 72px; margin: 0 auto var(--space-5); object-fit: contain;
}
.pf-gate__title { font-size: var(--text-h3-size); font-weight: 800; color: var(--color-heading); margin-bottom: var(--space-3); }
.pf-gate__desc { color: var(--color-text-2); line-height: var(--text-body-line); margin-bottom: var(--space-6); }

/* ═══════════════════════ Result page ═══════════════════════ */
/* min-width:0 overrides the flex default of min-width:auto — body is a
   column flexbox, so without this a wide child (e.g. a comparison table)
   makes this whole shell refuse to shrink below the child's content width
   instead of letting the child's own overflow-x:auto wrapper contain it. */
.pf-result-shell { width: 100%; max-width: var(--container-narrow); margin: 0 auto; padding: var(--space-6) var(--space-6) var(--space-16); min-width: 0; box-sizing: border-box; }
.pf-result-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); }
.pf-result-topbar img { height: 30px; width: auto; }
.pf-result-actions { display: flex; gap: var(--space-2); }

.pf-hero-card {
    background: var(--gradient-depth);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--space-10) var(--space-8);
    text-align: center;
    color: var(--color-white);
    margin-bottom: var(--space-6);
}
.pf-hero-card__mascot { width: 96px; height: auto; margin: 0 auto var(--space-4); display: block; filter: drop-shadow(0 10px 18px rgba(0,0,0,0.3)); }
.pf-hero-card__eyebrow { font-size: var(--text-kicker-size); font-weight: 700; color: var(--color-purple-100); margin-bottom: var(--space-2); }
.pf-hero-card__title { font-size: var(--text-h1-size); font-weight: 900; margin-bottom: var(--space-4); }
.pf-hero-card__intro { color: var(--color-purple-100); line-height: var(--text-body-line); max-width: 560px; margin: 0 auto; }

.pf-summary-card { margin-bottom: var(--space-6); }
.pf-summary-card h3 { font-size: var(--text-h3-size); color: var(--color-heading); margin-bottom: var(--space-4); }
.pf-summary-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-summary-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: var(--radius-pill);
    background: var(--color-navy-100); color: var(--color-navy-700); font-size: var(--text-sm-size); font-weight: 600;
}

.pf-report-card { margin-bottom: var(--space-6); }
.pf-report-card h3 {
    display: flex; align-items: center; gap: 8px;
    font-size: var(--text-h3-size); color: var(--color-heading); margin-bottom: var(--space-4);
}
.pf-report-icon { width: 32px; height: 32px; flex: none; object-fit: contain; }
.pf-report-card p { color: var(--color-text-2); line-height: var(--text-body-line); }
.pf-report-bullets { display: grid; gap: var(--space-3); padding: 0; margin: 0; list-style: none; }
.pf-report-bullets li { display: flex; gap: 10px; color: var(--color-text); line-height: 1.8; }
.pf-report-bullets li::before { content: ''; width: 8px; height: 8px; margin-top: 9px; border-radius: 50%; background: var(--color-accent); flex: none; }

.pf-report-items { display: grid; gap: var(--space-4); }
.pf-report-item { display: flex; gap: var(--space-3); padding: var(--space-4); background: var(--color-navy-100); border-radius: var(--radius-md); }
.pf-report-item__num {
    flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    background: var(--color-surface); color: var(--color-navy-700); font-weight: 800; font-size: 0.9rem;
}
.pf-report-item__title { font-weight: 700; color: var(--color-navy-700); margin-bottom: 2px; }
.pf-report-item__desc { font-size: var(--text-sm-size); color: var(--color-text-2); line-height: 1.75; }

.pf-result-cta { text-align: center; margin-top: var(--space-8); }

@media (max-width: 640px) {
    .pf-result-shell { padding: var(--space-4) var(--space-4) var(--space-10); }
    .pf-hero-card { padding: var(--space-6) var(--space-5); }
    .pf-question-icon { width: 46px; height: 46px; }
}

/* Phones: the action buttons squeezed onto two-line pills and, on the
   150-code page, pushed the page wider than the screen. Logo on its own
   row, actions below in a single horizontally scrollable row. */
@media (max-width: 640px) {
    .pf-result-topbar { flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
    .pf-result-actions { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
    .pf-result-actions::-webkit-scrollbar { display: none; }
    .pf-result-actions .ds-btn { white-space: nowrap; flex: 0 0 auto; }
}