/**
 * Maths Scoring Engine Styles — F-051
 *
 * Styles for the MathsRenderer: two-column layout, detected answer,
 * post-feedback panels (6-panel rich feedback), mark scheme,
 * self-mark checkboxes, and worked solution display.
 *
 * Dependencies: quiz-feedback-panel.css (sidebar), hint-checklist.css (hints),
 *               symbol-toolbar.css (toolbar base), base.css (design tokens)
 */

/* ── Two-column layout ── */
.quiz-maths-layout {
    display: flex;
    gap: var(--space-xl, 1.5rem);
    align-items: stretch;
}
.quiz-maths-main {
    flex: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.quiz-maths-sidebar {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}
@media (max-width: 900px) {
    .quiz-maths-layout { flex-direction: column; }
    .quiz-maths-sidebar { width: 100%; order: -1; }
}

/* ── Maths symbol toolbar (flat button row) ── */
.quiz-maths .symbol-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 4px;
    margin-bottom: var(--space-sm, 0.5rem);
}

/* ── Answer textarea ── */
.maths-answer-textarea {
    width: 100%;
    min-height: 200px;
    padding: var(--space-md, 1rem);
    background: var(--bg-secondary, rgba(255,255,255,0.05));
    border: 1px solid var(--border, #2d3040);
    border-radius: var(--radius-md, 8px);
    color: var(--text-primary, #e4e4e7);
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: var(--font-base, 1rem);
    line-height: 1.8;
    resize: vertical;
    transition: border-color 150ms;
    box-sizing: border-box;
}
.maths-answer-textarea:focus {
    outline: none;
    border-color: var(--accent, #2563EB);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.maths-answer-textarea::placeholder {
    color: var(--text-muted, #64748b);
}

/* ── Detected Answer Indicator ── */
.maths-detected-answer {
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(59, 130, 246, 0.08);
    border-left: 3px solid var(--accent, #2563EB);
    border-radius: 0 6px 6px 0;
    font-size: 0.85rem;
    color: var(--text-secondary, #9ca3af);
    display: flex;
    align-items: center;
    gap: 8px;
}
.maths-detected-answer .da-value {
    font-weight: 600;
    color: var(--text-primary, #e4e4e7);
    font-family: 'SF Mono', monospace;
}
.maths-detected-answer.da-empty { opacity: 0.5; }
.maths-detected-answer.da-wrong { border-left-color: #ef4444; }
.maths-detected-answer.da-wrong .da-value { color: #ef4444; }

/* ── Sidebar positioning fix for hint content ── */
.quiz-maths-sidebar .hint-checklist-container {
    margin: 0;
}
.quiz-maths-sidebar .quiz-hint-content {
    position: static;
    margin-bottom: 0;
    background: rgba(30, 41, 59, 0.6);
    box-shadow: none;
}

/* ── Post-Submit Feedback ── */
.maths-post-feedback { display: none; margin-top: 16px; }
.maths-post-feedback.visible { display: block; }

/* Header */
.maths-fb-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-weight: 600;
}
.maths-fb-header.fb-correct { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); color: #22c55e; }
.maths-fb-header.fb-partial { background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.3); color: #f59e0b; }
.maths-fb-header.fb-wrong   { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #ef4444; }
.maths-fb-header.fb-self-mark-header { background: rgba(251, 191, 36, 0.15); border: 1px solid rgba(251, 191, 36, 0.4); color: #fbbf24; }
.maths-fb-header .fb-icon  { font-size: 1.3rem; }
.maths-fb-header .fb-marks { font-size: 1.2rem; }
.maths-fb-header .fb-step  { font-size: 0.8rem; color: var(--text-secondary); font-weight: 400; margin-left: auto; }

/* Panel base */
.maths-fb-panel {
    margin-bottom: 12px;
    padding: 14px;
    border-radius: 8px;
    border: 1px solid var(--border, #2d3040);
}
.maths-fb-panel-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}
.maths-fb-panel p { margin: 0; line-height: 1.6; }

/* Your Answer panel */
.maths-fb-your-answer { background: rgba(255,255,255,0.03); }
.maths-fb-your-answer .maths-fb-panel-title { color: var(--text-secondary, #9ca3af); }
.maths-fb-your-answer .fb-answer-value { font-family: 'SF Mono', monospace; font-size: 1.1rem; font-weight: 600; }

/* Explanation panel (blue) */
.maths-fb-explanation { background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.3); }
.maths-fb-explanation .maths-fb-panel-title { color: #2563EB; }

/* Model Answer / Worked Solution (green) */
.maths-fb-model { background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.3); }
.maths-fb-model .maths-fb-panel-title { color: #22c55e; }
.maths-fb-model .ws-step { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(34,197,94,0.1); }
.maths-fb-model .ws-step:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.maths-fb-model .step-label { font-weight: 600; font-size: 0.9rem; color: #22c55e; margin-bottom: 2px; }
.maths-fb-model .step-work { font-family: 'SF Mono', monospace; font-size: 0.95rem; white-space: pre-wrap; }
.maths-fb-model .step-note { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; font-style: italic; }

/* Misconception (amber) */
.maths-fb-misconception { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.3); }
.maths-fb-misconception .maths-fb-panel-title { color: #f59e0b; }

/* Exam tip (purple) */
.maths-fb-tip { background: rgba(139, 92, 246, 0.1); border-color: rgba(139, 92, 246, 0.3); }
.maths-fb-tip .maths-fb-panel-title { color: #8b5cf6; }

/* SVG container in worked solution */
.maths-fb-model .ws-svg-container {
    margin-bottom: 12px;
    padding: 12px;
    background: rgba(34, 197, 94, 0.05);
    border-radius: 8px;
    text-align: center;
    overflow-x: auto;
}
.maths-fb-model .ws-svg-container svg {
    max-width: 100%;
    height: auto;
}

/* ── Mark Scheme ── */
.maths-fb-mark-scheme { background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.3); }
.maths-fb-mark-scheme .maths-fb-panel-title { color: #fbbf24; }
.maths-fb-mark-scheme .ms-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid rgba(251,191,36,0.1); }
.maths-fb-mark-scheme .ms-row:last-child { border-bottom: none; }
.maths-fb-mark-scheme .ms-icon { font-size: 1.1rem; width: 22px; flex-shrink: 0; text-align: center; }
.maths-fb-mark-scheme .ms-icon.ms-found { color: #22c55e; }
.maths-fb-mark-scheme .ms-icon.ms-missed { color: #ef4444; }
.maths-fb-mark-scheme .ms-label { font-weight: 700; font-size: 0.85rem; min-width: 55px; flex-shrink: 0; }
.maths-fb-mark-scheme .ms-desc { font-size: 0.9rem; color: var(--text-secondary, #9ca3af); flex: 1; }
.maths-fb-mark-scheme .ms-marks { font-size: 0.8rem; color: var(--text-muted, #64748b); white-space: nowrap; }
.maths-fb-mark-scheme .ms-dep { font-size: 0.75rem; color: var(--text-muted); opacity: 0.7; font-style: italic; }
.maths-fb-mark-scheme .ms-summary { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(251,191,36,0.2); font-size: 0.85rem; color: var(--text-secondary); }

/* ── Self-Mark Interactive Checkboxes ── */
.maths-fb-self-mark .ms-guidance { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 12px; font-style: italic; }
.maths-fb-mark-scheme .ms-checkbox-label { display: flex; align-items: center; cursor: pointer; width: 22px; flex-shrink: 0; }
.maths-fb-mark-scheme .ms-checkbox { display: none; }
.maths-fb-mark-scheme .ms-checkbox-custom { width: 20px; height: 20px; border: 2px solid rgba(251, 191, 36, 0.5); border-radius: 4px; display: inline-block; position: relative; transition: all 0.2s; }
.maths-fb-mark-scheme .ms-checkbox:checked + .ms-checkbox-custom { background: #22c55e; border-color: #22c55e; }
.maths-fb-mark-scheme .ms-checkbox:checked + .ms-checkbox-custom::after { content: '\2713'; position: absolute; top: -1px; left: 3px; color: white; font-size: 14px; font-weight: bold; }

/* ── Hint item marks badge ── */
.hint-item-marks {
    font-size: 0.7rem;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
    margin-left: auto;
    padding-left: 8px;
}