/*
 * Inventory-specific styles
 * Styles for the concept inventory question/answer flow
 */

/* Inventory landing page */
.inventory-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.inventory-header h1 {
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

.inventory-header p {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
}

/* Question display */
.question-container {
    max-width: 700px;
    margin: 0 auto;
}

.question-progress {
    text-align: center;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-lg);
}

.question-stem {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-xl);
    line-height: 1.5;
}

/* Answer options */
.options-list {
    list-style: none;
}

.option-item {
    margin-bottom: var(--spacing-md);
}

.option-label {
    display: block;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s;
}

.option-label:hover {
    border-color: var(--color-primary);
    background: #f0f7ff;
}

.option-input {
    margin-right: var(--spacing-sm);
}

.option-input:checked + .option-text {
    font-weight: 500;
}

.option-item:has(.option-input:checked) .option-label {
    border-color: var(--color-primary);
    background: #e8f0fe;
}

/* Results page */
.results-summary {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.results-score {
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
    font-weight: bold;
}

.results-breakdown {
    margin-top: var(--spacing-xl);
}

.result-item {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    border-radius: var(--border-radius);
}

.result-item.correct {
    background: #d4edda;
    border-left: 4px solid var(--color-success);
}

.result-item.incorrect {
    background: #f8d7da;
    border-left: 4px solid var(--color-error);
}