/**
 * 診断ページ（docs/design.md §4「診断」）
 * JavaScript が無いときは全問を縦に並べたフォーム、あるときは1問1画面（.is-enhanced）。
 */

.diagnosis { padding-top: var(--space-5); padding-bottom: var(--space-6); }

/* ---- 進捗（JS 有効時だけ表示） ---- */
.diagnosis__progress { margin-bottom: var(--space-5); }
.diagnosis__progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}
.diagnosis__back {
    background: none;
    border: 0;
    padding: var(--space-2) 0;
    color: var(--secondary);
    font-size: var(--fs-sm);
    cursor: pointer;
}
.diagnosis__back:disabled { visibility: hidden; }
.diagnosis__count {
    font-family: var(--font-number);
    font-weight: 500;
    font-size: var(--fs-sm);
    color: var(--text-sub);
}
.diagnosis__current { color: var(--text); }
.diagnosis__bar {
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--surface-2);
    overflow: hidden;
}
.diagnosis__bar-fill {
    height: 100%;
    width: 10%;
    border-radius: inherit;
    background: var(--gradient);
    transition: width var(--duration) var(--ease);
}

/* ---- 問題 ---- */
.question {
    border: 0;
    margin: 0 0 var(--space-7);
    padding: 0;
    min-width: 0;
}
.question__legend {
    padding: 0;
    margin-bottom: var(--space-5);
    width: 100%;
}
.question__number {
    display: block;
    font-family: var(--font-number);
    font-weight: 500;
    font-size: var(--fs-sm);
    color: var(--secondary);
    margin-bottom: var(--space-1);
}
.question__text {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--fs-xl);
    line-height: 1.4;
}

/* ---- 選択肢（縦に4つ並ぶカード） ---- */
.question__options { display: grid; gap: var(--space-3); }
.option {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 64px;
    padding: var(--space-4) var(--space-5);
    background: var(--surface-1);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
/* hover の枠はマウスなどで hover できる環境だけ。スマホではタップ後に hover が残り、
   選んだ選択肢（ピンク）とは別の枠が目立ってしまうため */
@media (hover: hover) {
    .option:hover { border-color: var(--secondary); }
}
.option__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.option__label { line-height: 1.5; }
/* 選んだ瞬間に枠がピンクになる（発光は使わない。発光はロゴ・診断ボタン・タイプ名の3か所だけ） */
.option:has(.option__input:checked),
.option.is-selected {
    border-color: var(--primary);
    background: var(--surface-2);
}
.option:has(.option__input:focus-visible) {
    outline: 2px solid var(--secondary);
    outline-offset: 3px;
}
.option:active { transform: scale(0.99); }

.diagnosis__notice { margin-top: var(--space-5); text-align: center; }

/* ---- JS 有効時: 1問1画面 ---- */
.is-enhanced .question { display: none; margin-bottom: 0; }
.is-enhanced .question.is-current { display: block; animation: question-in 0.3s var(--ease) both; }
.is-enhanced .diagnosis__submit { display: none; }
@keyframes question-in {
    from { opacity: 0; transform: translateX(12px); }
    to { opacity: 1; transform: none; }
}

/* ---- 複数選ぶ問い（Q2〜Q5。版5） ---- */
.question__hint { display: block; margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--text-sub); font-weight: 400; }
.question[data-type="multi"] .question__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.option--none { grid-column: 1 / -1; }
.option.is-disabled { opacity: 0.45; cursor: not-allowed; }
.question__next { margin-top: var(--space-4); }
.question__next[hidden] { display: none; }

/* ---- 「もっと見る」（Q2〜Q5 の追加ジャンル。チップは折り返し、横スクロールにしない） ---- */
.more { margin-top: var(--space-3); }
.more__toggle {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-2);
    color: var(--secondary);
    font-size: var(--fs-sm);
    cursor: pointer;
    list-style: none;
}
.more__toggle::-webkit-details-marker { display: none; }
.more__toggle::after { content: ' ▾'; }
.more[open] > .more__toggle::after { content: ' ▴'; }
.more__group + .more__group { margin-top: var(--space-3); }
.more__heading { font-size: var(--fs-xs); color: var(--text-sub); margin: var(--space-2) 0 var(--space-1); }
.more__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.option--chip { display: inline-flex; width: auto; max-width: 100%; min-height: 40px; padding: 6px 14px; border-radius: var(--radius-full); font-size: var(--fs-sm); }
.option--chip .option__label { overflow-wrap: anywhere; }

/* Q1 の答えに合わないジャンルを隠す（diagnosis.js の applyPerformer。2026-10-07） */
.diagnosis .is-filtered { display: none !important; }