/* Shared widget styles for the AI & Machine Learning track ('ai-ml').
 * Curriculum is authored module by module (mirrors it-support-shared.css);
 * every ai-ml-module-*.js file reuses these .aim-* classes instead of
 * shipping its own near-duplicate stylesheet. */

.aim-shell { background: #fff; }
.aim-main { max-width: 920px; margin: 0 auto; padding: 32px clamp(16px, 4vw, 24px) 64px; }

.aim-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 28px 0 24px; border-bottom: 1px solid #e5e7eb; margin-bottom: 24px; }
.aim-hero h1 { margin: 4px 0 8px; color: #1e3a5f; font-size: clamp(22px, 3.2vw, 30px); font-weight: 800; line-height: 1.2; }
.aim-lede { margin: 0; max-width: 60ch; color: #475569; font: 14px/1.6 Inter, sans-serif; }
.aim-kicker { margin: 0; color: #f97316; font: 700 11px Inter, sans-serif; text-transform: uppercase; letter-spacing: .07em; }
.aim-hero-action { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 9px 14px; color: #fff; background: #1e3a5f; border-radius: 8px; font: 700 12px Inter, sans-serif; text-decoration: none; }
.aim-hero-action:hover { background: #142d4b; }

.aim-progress { display: flex; gap: 20px; margin: 0; }
.aim-progress dt { color: #94a3b8; font: 700 10px Inter, sans-serif; text-transform: uppercase; letter-spacing: .05em; }
.aim-progress dd { margin: 2px 0 0; color: #1e3a5f; font: 700 18px Inter, sans-serif; }

.aim-objective { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; margin-bottom: 24px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 12px; }
.aim-objective span { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: #f97316; background: #fff; border-radius: 999px; font-size: 16px; }
.aim-objective h2 { margin: 4px 0 0; color: #1e3a5f; font-size: 15px; font-weight: 700; line-height: 1.5; }

.aim-section { padding: 22px 0; }
.aim-section-collapsible { border-top: 1px solid #e5e7eb; }
.aim-section-collapsible:last-of-type { border-bottom: 1px solid #e5e7eb; }
.aim-section-summary { cursor: pointer; list-style: none; }
.aim-section-summary::-webkit-details-marker { display: none; }
.aim-section-heading { display: flex; align-items: flex-start; gap: 14px; }
.aim-section-heading > span { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-top: 2px; color: #1e3a5f; background: #eef2f7; border-radius: 999px; font: 700 13px Inter, sans-serif; }
.aim-section-heading h2 { margin: 3px 0 0; color: #1e3a5f; font-size: 18px; font-weight: 700; }
.aim-section-body { padding-top: 16px; }
.aim-instruction { margin: 0 0 16px; color: #475569; font: 13px/1.65 Inter, sans-serif; }

.aim-lesson-grid { display: grid; gap: 10px; }
.aim-lesson { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.aim-lesson > summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; background: #f8fafc; }
.aim-lesson > summary::-webkit-details-marker { display: none; }
.aim-lesson-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: #f97316; background: #fff; border: 1px solid #fed7aa; border-radius: 10px; font-size: 16px; }
.aim-lesson > summary > span:nth-child(2) { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.aim-lesson > summary strong { color: #1e3a5f; font-size: 13px; }
.aim-lesson > summary small { color: #94a3b8; font: 11px Inter, sans-serif; }
.aim-lesson-chevron { flex: 0 0 auto; color: #94a3b8; transition: transform .15s ease; }
.aim-lesson[open] .aim-lesson-chevron { transform: rotate(180deg); }
.aim-lesson-body { padding: 4px 16px 18px; }
.aim-lesson-body h4 { margin: 12px 0 6px; color: #1e3a5f; font: 700 11px Inter, sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.aim-lesson-body ul, .aim-lesson-body ol { margin: 0; padding-left: 18px; color: #475569; font: 13px/1.6 Inter, sans-serif; }
.aim-lesson-body li { margin-bottom: 4px; }
.aim-lesson-topic { margin-top: 10px; padding: 10px 12px; background: #f8fafc; border-radius: 8px; }
.aim-lesson-topic strong { display: block; margin-bottom: 3px; color: #1e3a5f; font-size: 12.5px; }
.aim-lesson-topic p { margin: 0; color: #475569; font: 12.5px/1.6 Inter, sans-serif; }
.aim-practice { margin-top: 12px; padding: 12px 14px; background: #eff6ff; border-radius: 10px; }
.aim-practice strong { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: #1d4ed8; font-size: 12px; }

.aim-code-block { margin: 10px 0; padding: 12px 14px; overflow-x: auto; color: #e2e8f0; background: #0f172a; border-radius: 10px; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }

.aim-principle { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; background: #f8fafc; border-left: 3px solid #f97316; border-radius: 0 10px 10px 0; }
.aim-principle i { color: #f97316; margin-top: 2px; }
.aim-principle p { margin: 0; color: #1e3a5f; font: 13px/1.6 Inter, sans-serif; }

/* Quiz panel */
.aim-quiz-form { display: grid; gap: 16px; }
.aim-panel-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.aim-panel-heading h3 { margin: 3px 0 0; color: #1e3a5f; font-size: 15px; font-weight: 700; }
.aim-panel-heading > span { color: #64748b; font: 700 11px Inter, sans-serif; }
.aim-quiz-question { padding: 14px 16px; border: 1px solid #e2e8f0; border-radius: 12px; }
.aim-quiz-question legend { padding: 0 4px; color: #1e3a5f; font: 700 13px/1.5 Inter, sans-serif; }
.aim-quiz-question legend span { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 6px; color: #fff; background: #1e3a5f; border-radius: 999px; font-size: 11px; }
.aim-quiz-options { display: grid; gap: 8px; margin-top: 10px; }
.aim-quiz-options label { display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 9px; font: 13px/1.5 Inter, sans-serif; color: #334155; cursor: pointer; }
.aim-quiz-options label:hover { border-color: #cbd5e1; }
.aim-quiz-options input { margin-top: 3px; }
.aim-quiz-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.aim-quiz-submit, .aim-quiz-retry { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; color: #fff; background: #1e3a5f; border: none; border-radius: 8px; font: 700 12px Inter, sans-serif; cursor: pointer; }
.aim-quiz-submit:disabled { opacity: .45; cursor: not-allowed; }
.aim-quiz-submit:not(:disabled):hover, .aim-quiz-retry:hover { background: #142d4b; }
.aim-quiz-empty, .aim-quiz-ready { padding: 10px 12px; color: #64748b; background: #f8fafc; border-radius: 8px; font: 12.5px Inter, sans-serif; }
.aim-quiz-score { padding: 16px; border-radius: 12px; }
.aim-quiz-score.aim-quiz-pass { background: #f0fdf4; border: 1px solid #bbf7d0; }
.aim-quiz-score.aim-quiz-remediate { background: #fffbeb; border: 1px solid #fde68a; }
.aim-quiz-score-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aim-quiz-score-heading h3 { margin: 2px 0 0; color: #1e3a5f; font-size: 15px; }
.aim-quiz-score-heading > span { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: #1e3a5f; background: #fff; border-radius: 999px; font: 800 14px Inter, sans-serif; }
.aim-quiz-feedback-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.aim-quiz-feedback-list li { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; background: #fff; border-radius: 8px; font: 12.5px/1.55 Inter, sans-serif; }
.aim-quiz-feedback-correct i { color: #16a34a; }
.aim-quiz-feedback-incorrect i { color: #d97706; }
.aim-quiz-feedback-list strong { display: block; color: #1e3a5f; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.aim-quiz-feedback-list p { margin: 2px 0 0; color: #475569; }

/* Fill-in-the-blank drill */
.aim-blank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.aim-blank-item { padding: 10px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; }
.aim-blank-prompt { margin: 0 0 8px; color: #334155; font: 13px/1.6 Inter, sans-serif; }
.aim-blank-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aim-blank-row input { flex: 1 1 12rem; min-width: 8rem; padding: 7px 10px; color: #1e3a5f; background: #fff; border: 1px solid #94a3b8; border-radius: 7px; font: 700 12.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.aim-blank-row input:focus-visible { outline: 2px solid #f97316; outline-offset: 1px; }
.aim-blank-check { flex: 0 0 auto; color: #fff; background: #1e3a5f; border: none; border-radius: 7px; padding: 7px 12px; font: 700 11px Inter, sans-serif; cursor: pointer; }
.aim-blank-item.is-correct { border-color: #86efac; background: #f0fdf4; }
.aim-blank-item.is-incorrect { border-color: #fde68a; background: #fffbeb; }
.aim-blank-result { margin: 6px 0 0; font: 700 11.5px Inter, sans-serif; }
.aim-blank-item.is-correct .aim-blank-result { color: #166534; }
.aim-blank-item.is-incorrect .aim-blank-result { color: #92400e; }

/* Hands-on lab: step checklist + written reflection */
.aim-lab-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.aim-lab-step { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; }
.aim-lab-step input[type="checkbox"] { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; }
.aim-lab-step span { color: #334155; font: 13px/1.55 Inter, sans-serif; }
.aim-lab-step.is-done { background: #f0fdf4; border-color: #bbf7d0; }
.aim-lab-step.is-done span { color: #166534; }
.aim-lab-substeps { margin: 12px 0 18px; padding-left: 4px; }
.aim-lab-substeps h4 { margin: 0 0 8px; color: #1e3a5f; font-size: 13px; font-weight: 700; }

.aim-reflection { margin-top: 6px; }
.aim-reflection label { display: block; margin-bottom: 6px; color: #1e3a5f; font: 700 12.5px/1.5 Inter, sans-serif; }
.aim-reflection textarea { width: 100%; min-height: 88px; padding: 10px 12px; color: #1e293b; background: #fff; border: 1px solid #cbd5e1; border-radius: 10px; font: 13px/1.6 Inter, sans-serif; resize: vertical; }
.aim-reflection textarea:focus-visible { outline: 2px solid #f97316; outline-offset: 1px; border-color: #f97316; }
.aim-reflection small { display: block; margin-top: 4px; color: #94a3b8; font: 11px Inter, sans-serif; }

/* Real-product deliverable: repo URL (required) + optional live-demo URL.
 * AI_ML_APPLIED_BUILD_TRACK.md — Model B, student's own GitHub, no
 * Mission-Next-built starter templates. */
.aim-repo-fields { display: grid; gap: 12px; margin-top: 14px; }
.aim-repo-field label { display: block; margin-bottom: 6px; color: #1e3a5f; font: 700 12.5px/1.5 Inter, sans-serif; }
.aim-repo-field input { width: 100%; padding: 9px 12px; color: #1e293b; background: #fff; border: 1px solid #cbd5e1; border-radius: 10px; font: 13px/1.6 Inter, sans-serif; }
.aim-repo-field input:focus-visible { outline: 2px solid #f97316; outline-offset: 1px; border-color: #f97316; }
.aim-repo-field input.is-invalid { border-color: #fca5a5; }
.aim-repo-field small { display: block; margin-top: 4px; color: #94a3b8; font: 11px Inter, sans-serif; }
.aim-repo-field .aim-repo-error { color: #b91c1c; }

.aim-lab-status { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 12px; border-radius: 9px; font: 700 12.5px Inter, sans-serif; }
.aim-status-pass { color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; }
.aim-status-pending { color: #64748b; background: #f8fafc; border: 1px solid #e2e8f0; }

/* Capstone stage tracker (Module 12) */
.aim-stage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.aim-stage { display: flex; gap: 12px; padding: 14px 16px; border: 1px solid #e2e8f0; border-radius: 12px; }
.aim-stage-num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: #1e3a5f; background: #eef2f7; border-radius: 999px; font: 700 12px Inter, sans-serif; }
.aim-stage.is-done .aim-stage-num { color: #fff; background: #10b981; }
.aim-stage h4 { margin: 0 0 4px; color: #1e3a5f; font-size: 13.5px; font-weight: 700; }
.aim-stage p { margin: 0; color: #64748b; font: 12.5px/1.55 Inter, sans-serif; }

@media (max-width: 640px) {
  .aim-hero { flex-direction: column; align-items: flex-start; }
  .aim-progress { gap: 16px; }
}