/**
 * learning-questions.css — Styles for QuestionRenderer and QuestionEditor
 * Uses --ui-* CSS variables from class.ui.css hyper-parameter system.
 * These are component-specific classes, not generic utilities.
 */

/* ── Question Wrapper ── */
.qr-wrapper {
    background: color-mix(in srgb, var(--ui-primary) 8%, white);
    border-radius: var(--ui-radius-lg);
    border: 2px solid color-mix(in srgb, var(--ui-primary) 20%, white);
    overflow: hidden;
}

.qr-header {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-4);
    background: color-mix(in srgb, var(--ui-primary) 12%, white);
    border-bottom: 1px solid color-mix(in srgb, var(--ui-primary) 20%, white);
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-primary-800);
}

.qr-header-badge {
    margin-left: auto;
    font-size: var(--ui-text-xs);
    color: color-mix(in srgb, var(--ui-primary) 40%, white);
}

.qr-header-points {
    font-size: var(--ui-text-xs);
    background: color-mix(in srgb, var(--ui-primary) 20%, white);
    color: var(--ui-primary-700);
    padding: 2px var(--ui-space-2);
    border-radius: var(--ui-radius-full);
}

.qr-prompt {
    padding: var(--ui-space-3) var(--ui-space-4) var(--ui-space-2);
    color: var(--ui-primary-800);
    font-weight: var(--ui-font-medium);
}

.qr-interaction {
    padding: 0 var(--ui-space-4) var(--ui-space-2);
}

.qr-feedback {
    padding: 0 var(--ui-space-4) var(--ui-space-3);
    margin-top: var(--ui-space-2);
}

.qr-feedback-correct {
    padding: var(--ui-space-3);
    background: color-mix(in srgb, green 10%, white);
    color: #166534;
    border-radius: var(--ui-radius-md);
}

.qr-feedback-incorrect {
    padding: var(--ui-space-3);
    background: color-mix(in srgb, red 10%, white);
    color: #991b1b;
    border-radius: var(--ui-radius-md);
}

.qr-feedback-info {
    padding: var(--ui-space-3);
    background: color-mix(in srgb, var(--ui-primary) 5%, white);
    color: var(--ui-primary-800);
    border-radius: var(--ui-radius-md);
    border: 1px solid color-mix(in srgb, var(--ui-primary) 20%, white);
}

/* ── Options (MCQ, Multi-Select) ── */
.qr-options { display: flex; flex-direction: column; gap: var(--ui-space-2); margin-top: var(--ui-space-2); }

.qr-option {
    padding: var(--ui-space-3);
    background: white;
    border-radius: var(--ui-radius-md);
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
}
.qr-option:hover { background: color-mix(in srgb, var(--ui-primary) 5%, white); }
.qr-option.selected { border-color: var(--ui-primary); background: color-mix(in srgb, var(--ui-primary) 8%, white); }
.qr-option.correct { border-color: #16a34a; background: color-mix(in srgb, green 5%, white); }
.qr-option.incorrect { border-color: #dc2626; background: color-mix(in srgb, red 5%, white); }

.qr-option-letter {
    width: 28px; height: 28px;
    border-radius: var(--ui-radius-full);
    background: color-mix(in srgb, var(--ui-primary) 15%, white);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--ui-text-sm); font-weight: var(--ui-font-bold);
    color: var(--ui-primary-700);
    flex-shrink: 0;
}

.qr-option-label { flex: 1; }

.qr-checkbox {
    width: 20px; height: 20px;
    border-radius: var(--ui-radius-sm);
    border: 2px solid var(--ui-gray-300);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}
.qr-checkbox.checked {
    background: var(--ui-primary);
    border-color: var(--ui-primary);
    color: white;
}

/* ── Buttons ── */
.qr-btn {
    display: inline-flex; align-items: center; gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-4);
    background: var(--ui-primary);
    color: white;
    border-radius: var(--ui-radius-md);
    cursor: pointer;
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-font-medium);
    border: none;
    transition: background 0.15s;
    margin-top: var(--ui-space-3);
}
.qr-btn:hover { filter: brightness(0.9); }

.qr-btn-secondary {
    background: var(--ui-gray-100);
    color: var(--ui-gray-700);
}
.qr-btn-secondary:hover { background: var(--ui-gray-200); }

/* ── True/False ── */
.qr-tf-row { display: flex; gap: var(--ui-space-4); margin-top: var(--ui-space-3); }

.qr-tf-btn {
    flex: 1;
    padding: var(--ui-space-4);
    background: white;
    border-radius: var(--ui-radius-lg);
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.15s;
    text-align: center;
    font-weight: var(--ui-font-semibold);
    font-size: var(--ui-text-lg);
}
.qr-tf-btn:hover { border-color: color-mix(in srgb, var(--ui-primary) 30%, white); }
.qr-tf-btn.correct { border-color: #16a34a; background: color-mix(in srgb, green 5%, white); }
.qr-tf-btn.incorrect { border-color: #dc2626; background: color-mix(in srgb, red 5%, white); }

/* ── Inputs ── */
.qr-input {
    padding: var(--ui-space-3) var(--ui-space-4);
    border: 2px solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    font-size: var(--ui-text-lg);
    font-family: var(--ui-font-mono, monospace);
    outline: none;
    transition: border-color 0.15s;
}
.qr-input:focus { border-color: var(--ui-primary); }

.qr-input-text {
    width: 100%;
    padding: var(--ui-space-3) var(--ui-space-4);
    border: 2px solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    outline: none;
    transition: border-color 0.15s;
    margin-top: var(--ui-space-3);
}
.qr-input-text:focus { border-color: var(--ui-primary); }

.qr-textarea {
    width: 100%;
    padding: var(--ui-space-3) var(--ui-space-4);
    border: 2px solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    outline: none;
    resize: vertical;
    margin-top: var(--ui-space-3);
    transition: border-color 0.15s;
}
.qr-textarea:focus { border-color: var(--ui-primary); }

.qr-code-input {
    width: 100%;
    padding: var(--ui-space-3) var(--ui-space-4);
    border: 2px solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    font-family: var(--ui-font-mono, monospace);
    font-size: var(--ui-text-sm);
    background: #1a1a2e;
    color: #4ade80;
    outline: none;
    resize: vertical;
    margin-top: var(--ui-space-3);
}

.qr-blank-input {
    width: 7rem;
    padding: var(--ui-space-1) var(--ui-space-2);
    border: none; border-bottom: 2px solid var(--ui-primary);
    text-align: center;
    font-weight: var(--ui-font-medium);
    outline: none;
    background: transparent;
    margin: 0 var(--ui-space-1);
}

/* ── Matching ── */
.qr-match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ui-space-4); margin-top: var(--ui-space-3); }
.qr-match-col { display: flex; flex-direction: column; gap: var(--ui-space-2); }
.qr-match-label { font-size: var(--ui-text-xs); font-weight: var(--ui-font-semibold); color: var(--ui-gray-400); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--ui-space-1); }

.qr-match-item {
    padding: var(--ui-space-3);
    background: white;
    border-radius: var(--ui-radius-md);
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.15s;
    font-size: var(--ui-text-sm);
}
.qr-match-item:hover { border-color: color-mix(in srgb, var(--ui-primary) 30%, white); }
.qr-match-item.selected { border-color: var(--ui-primary); background: color-mix(in srgb, var(--ui-primary) 5%, white); }
.qr-match-item.matched { border-color: #16a34a; background: color-mix(in srgb, green 5%, white); }

/* ── Ordering ── */
.qr-order-list { display: flex; flex-direction: column; gap: var(--ui-space-2); margin-top: var(--ui-space-3); }

.qr-order-item {
    padding: var(--ui-space-3);
    background: white;
    border-radius: var(--ui-radius-md);
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
}

.qr-order-num {
    width: 28px; height: 28px;
    border-radius: var(--ui-radius-full);
    background: var(--ui-gray-200);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--ui-text-sm); font-weight: var(--ui-font-bold);
    color: var(--ui-gray-600);
    flex-shrink: 0;
}

.qr-move-btn {
    width: 28px; height: 28px;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-gray-100);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--ui-gray-500);
    border: none;
    transition: background 0.15s;
}
.qr-move-btn:hover { background: var(--ui-gray-200); }

/* ── Sorting ── */
.qr-sort-pool {
    display: flex; flex-wrap: wrap; gap: var(--ui-space-2);
    padding: var(--ui-space-3);
    background: var(--ui-gray-50);
    border-radius: var(--ui-radius-md);
    min-height: 3rem;
    margin-bottom: var(--ui-space-3);
}

.qr-sort-chip {
    padding: var(--ui-space-1) var(--ui-space-3);
    border-radius: var(--ui-radius-full);
    font-size: var(--ui-text-sm);
    cursor: pointer;
    transition: all 0.15s;
}

.qr-sort-chip-pool { background: var(--ui-primary); color: white; }
.qr-sort-chip-pool:hover { filter: brightness(0.9); }
.qr-sort-chip-pool.ring { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 30%, white); }
.qr-sort-chip-bin { background: color-mix(in srgb, var(--ui-primary) 10%, white); color: var(--ui-primary-700); }
.qr-sort-chip-bin:hover { background: color-mix(in srgb, red 10%, white); color: #991b1b; }

.qr-sort-bin {
    padding: var(--ui-space-3);
    background: white;
    border-radius: var(--ui-radius-md);
    border: 2px dashed var(--ui-gray-300);
    min-height: 5rem;
}

.qr-sort-bin-label { font-size: var(--ui-text-sm); font-weight: var(--ui-font-semibold); color: var(--ui-gray-600); margin-bottom: var(--ui-space-2); }
.qr-sort-bin-items { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); min-height: 2rem; }

/* ── Number Line ── */
.qr-numline-container { margin-top: var(--ui-space-4); padding: 0 var(--ui-space-4); }
.qr-numline-value { text-align: center; margin-top: var(--ui-space-2); font-size: var(--ui-text-lg); font-family: var(--ui-font-mono, monospace); font-weight: var(--ui-font-bold); color: var(--ui-primary-700); }

/* ── Fraction Visual ── */
.qr-fraction-bar { display: flex; border-radius: var(--ui-radius-md); overflow: hidden; border: 2px solid color-mix(in srgb, var(--ui-primary) 20%, white); height: 48px; }
.qr-fraction-seg { flex: 1; border-right: 1px solid color-mix(in srgb, var(--ui-primary) 15%, white); transition: background 0.15s; }
.qr-fraction-seg:last-child { border-right: none; }
.qr-fraction-seg.filled { background: var(--ui-primary); }
.qr-fraction-seg.empty { background: white; }
.qr-fraction-seg.clickable { cursor: pointer; }
.qr-fraction-seg.clickable:hover { background: color-mix(in srgb, var(--ui-primary) 10%, white); }
.qr-fraction-display { text-align: center; margin-top: var(--ui-space-2); font-size: var(--ui-text-xl); font-weight: var(--ui-font-bold); color: var(--ui-primary-700); }
.qr-fraction-input { width: 4rem; padding: var(--ui-space-2); border: 2px solid var(--ui-gray-200); border-radius: var(--ui-radius-lg); text-align: center; font-size: var(--ui-text-xl); font-weight: var(--ui-font-bold); outline: none; }
.qr-fraction-input:focus { border-color: var(--ui-primary); }
.qr-fraction-divider { font-size: var(--ui-text-2xl); font-weight: var(--ui-font-bold); color: var(--ui-gray-400); }

/* ── Coordinate Graph ── */
.qr-coord-container { margin-top: var(--ui-space-4); display: flex; flex-direction: column; align-items: center; }
.qr-coord-display { text-align: center; margin-top: var(--ui-space-2); font-family: var(--ui-font-mono, monospace); font-weight: var(--ui-font-bold); color: var(--ui-primary-700); }

/* ── Arithmetic Grid ── */
.qr-grid-table { border-collapse: collapse; margin: var(--ui-space-4) auto; }
.qr-grid-cell { border: 1px solid var(--ui-gray-300); padding: 0; }
.qr-grid-cell-fixed { background: var(--ui-gray-100); }
.qr-grid-cell-value { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; font-family: var(--ui-font-mono, monospace); font-weight: var(--ui-font-bold); font-size: var(--ui-text-lg); }
.qr-grid-cell-input { width: 2.5rem; height: 2.5rem; text-align: center; font-family: var(--ui-font-mono, monospace); font-weight: var(--ui-font-bold); font-size: var(--ui-text-lg); border: none; outline: none; }
.qr-grid-cell-input:focus { background: color-mix(in srgb, var(--ui-primary) 5%, white); }

/* ── Stub / Unsupported ── */
.qr-stub {
    margin-top: var(--ui-space-3);
    padding: var(--ui-space-6);
    background: var(--ui-gray-50);
    border-radius: var(--ui-radius-lg);
    border: 2px dashed var(--ui-gray-300);
    text-align: center;
}
.qr-stub-icon { font-size: var(--ui-text-3xl); color: var(--ui-gray-300); margin-bottom: var(--ui-space-2); }
.qr-stub-label { color: var(--ui-gray-500); font-weight: var(--ui-font-medium); }
.qr-stub-desc { color: var(--ui-gray-400); font-size: var(--ui-text-sm); margin-top: var(--ui-space-1); }

/* ── Editor ── */
.qe-section {
    background: white;
    border-radius: var(--ui-radius-lg);
    border: 1px solid var(--ui-gray-200);
    padding: var(--ui-space-4);
}

.qe-section-title {
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-700);
    margin-bottom: var(--ui-space-2);
}

.qe-type-chip {
    padding: var(--ui-space-1) var(--ui-space-2);
    border-radius: var(--ui-radius-sm);
    font-size: var(--ui-text-xs);
    cursor: pointer;
    transition: all 0.15s;
}
.qe-type-chip.active { background: var(--ui-primary); color: white; }
.qe-type-chip.inactive { background: var(--ui-gray-100); color: var(--ui-gray-600); }
.qe-type-chip.inactive:hover { background: color-mix(in srgb, var(--ui-primary) 10%, white); }

.qe-cat-label {
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.qe-input {
    width: 100%;
    padding: var(--ui-space-2) var(--ui-space-3);
    border: 1px solid var(--ui-gray-200);
    border-radius: var(--ui-radius-md);
    font-size: var(--ui-text-sm);
    outline: none;
    transition: border-color 0.15s;
}
.qe-input:focus { border-color: var(--ui-primary); }

.qe-input-sm { width: auto; }

.qe-label { font-size: var(--ui-text-xs); color: var(--ui-gray-500); margin-bottom: var(--ui-space-1); }

.qe-correct-indicator {
    width: 24px; height: 24px;
    border-radius: var(--ui-radius-full);
    border: 2px solid var(--ui-gray-300);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    transition: all 0.15s;
}
.qe-correct-indicator.active { background: #16a34a; border-color: #16a34a; color: white; }

.qe-remove-btn {
    width: 24px; height: 24px;
    border-radius: var(--ui-radius-sm);
    background: color-mix(in srgb, red 5%, white);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    color: color-mix(in srgb, red 40%, white);
    border: none;
}
.qe-remove-btn:hover { background: color-mix(in srgb, red 10%, white); }

/* ── Utility (layout only, using CSS variables) ── */
.qr-flex { display: flex; }
.qr-flex-1 { flex: 1; }
.qr-flex-col { display: flex; flex-direction: column; }
.qr-flex-wrap { display: flex; flex-wrap: wrap; }
.qr-items-center { align-items: center; }
.qr-items-baseline { align-items: baseline; }
.qr-justify-center { justify-content: center; }
.qr-gap-1 { gap: var(--ui-space-1); }
.qr-gap-2 { gap: var(--ui-space-2); }
.qr-gap-3 { gap: var(--ui-space-3); }
.qr-gap-4 { gap: var(--ui-space-4); }
.qr-mt-2 { margin-top: var(--ui-space-2); }
.qr-mt-3 { margin-top: var(--ui-space-3); }
.qr-mt-4 { margin-top: var(--ui-space-4); }
.qr-mb-2 { margin-bottom: var(--ui-space-2); }
.qr-mb-3 { margin-bottom: var(--ui-space-3); }
.qr-px-4 { padding-left: var(--ui-space-4); padding-right: var(--ui-space-4); }
.qr-shrink-0 { flex-shrink: 0; }
.qr-text-xs { font-size: var(--ui-text-xs); }
.qr-text-sm { font-size: var(--ui-text-sm); }
.qr-text-lg { font-size: var(--ui-text-lg); }
.qr-text-center { text-align: center; }
.qr-font-bold { font-weight: var(--ui-font-bold); }
.qr-font-medium { font-weight: var(--ui-font-medium); }
.qr-font-mono { font-family: var(--ui-font-mono, monospace); }
.qr-text-gray-400 { color: var(--ui-gray-400); }
.qr-text-gray-500 { color: var(--ui-gray-500); }
.qr-text-gray-600 { color: var(--ui-gray-600); }
.qr-w-full { width: 100%; }
.qr-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ui-space-3); }
.qr-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--ui-space-3); }
.qr-grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--ui-space-3); }
.qr-hidden { display: none; }

/* ── Mode Buttons ── */
.qr-mode-btn {
    padding: var(--ui-space-2) var(--ui-space-3);
    border-radius: var(--ui-radius-md);
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-font-medium);
    cursor: pointer;
    border: none;
    transition: all 0.15s;
}
.qr-mode-btn.active { background: var(--ui-primary); color: white; }
.qr-mode-btn.inactive { background: var(--ui-gray-100); color: var(--ui-gray-600); }
.qr-mode-btn.inactive:hover { background: color-mix(in srgb, var(--ui-primary) 10%, white); }
.qr-min-h-8 { min-height: 2rem; }
.qr-min-h-12 { min-height: 3rem; }