/**
 * 点选题（quiz）专用样式。
 *
 * 只放这个题型独有的两样东西：题面里的**空位**和候选项**按钮**。
 * 卡片、渐变底、AI 老师那些和 article_with_ai_right 共用，
 * 已经在 article_with_ai_right.css 里，这里不重复。
 *
 * 之所以从 JS 的内联 style 搬到这里：内联样式改不了 :hover / :active，
 * 点起来没有任何反馈，孩子会以为没点上又点一次。
 */

/* =========================
 * 题面里的空位
 * ========================= */

.quiz-slot {
    display: inline-block;
    min-width: 42px;
    height: 30px;
    line-height: 28px;
    padding: 0 8px;
    margin: 0 3px;
    text-align: center;
    vertical-align: middle;
    border-radius: 7px;
    border: 1.5px dashed #94a3b8;
    background: #f8fafc;
    color: #94a3b8;
    cursor: pointer;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 15px;
    transition: border-color .12s ease-out, background .12s ease-out, transform .12s ease-out;
}

/* 当前该填的那个空。**必须和普通空位有明显区别**——
   候选项点下去会填进这里，看不出是哪个就等于在盲填。 */
.quiz-slot.is-focus {
    border: 1.5px solid #6366f1;
    background: #eef2ff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}

.quiz-slot.is-filled {
    border: 1.5px solid #4f46e5;
    background: #eef2ff;
    color: #312e81;
    font-weight: 600;
}

/* 填好的空点一下能取回来，鼠标上去要看得出这一点 */
.quiz-slot.is-filled:hover {
    border-color: #ef4444;
    background: #fef2f2;
    color: #991b1b;
}

/* =========================
 * 候选项按钮
 * ========================= */

.quiz-option {
    min-width: 52px;
    height: 44px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid #c7cfe6;
    background: #fff;
    color: #18213a;
    cursor: pointer;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 16px;
    transition: all .12s ease-out;
}

.quiz-option:hover:not(:disabled) {
    border-color: #6366f1;
    background: #eef2ff;
    color: #3730a3;
    transform: translateY(-1px);
}

.quiz-option:active:not(:disabled) {
    transform: translateY(0);
}

/* 已用掉的、或不属于当前这个空的候选项。
   保持占位而不是移除——位置一直跳的话很难点。 */
.quiz-option:disabled {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #cbd5e1;
    cursor: not-allowed;
}