/*
 * Self-contained palette so the tool looks the same inside any theme
 * (same approach as the other EducationalEngine generators).
 */
.ee-hai-app {
	--ee-hai-bg: #ffffff;
	--ee-hai-surface: #f1f5f9;
	--ee-hai-text: #1e293b;
	--ee-hai-muted: #52606d;
	--ee-hai-border: #cbd5e1;
	--ee-hai-accent: #1d4ed8;
	--ee-hai-accent-hover: #1e40af;
	--ee-hai-correct: #15803d;
	--ee-hai-correct-bg: #f0fdf4;
	--ee-hai-danger: #b91c1c;
	--ee-hai-danger-bg: #fef2f2;

	max-width: 900px;
	margin: 0 auto 48px;
	padding: 24px;
	background: var(--ee-hai-bg);
	border: 1px solid var(--ee-hai-border);
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
	color: var(--ee-hai-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	line-height: 1.5;
}
.ee-hai-app * { box-sizing: border-box; }
.ee-hai-app button, .ee-hai-app input, .ee-hai-app select, .ee-hai-app textarea {
	font-family: inherit; box-shadow: none; text-shadow: none; background-image: none;
}

.ee-hai-quota-bar {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center;
	background: var(--ee-hai-surface); border: 1px solid var(--ee-hai-border); border-radius: 6px;
	padding: 10px 16px; margin-bottom: 16px; font-size: 0.9em;
}
.ee-hai-quota-label { font-weight: 700; }
.ee-hai-quota-count { color: var(--ee-hai-muted); }
.ee-hai-quota-count a { color: var(--ee-hai-accent); }

.ee-hai-tabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid var(--ee-hai-border); }
.ee-hai-tab {
	background: transparent !important; border: 0; border-bottom: 3px solid transparent; color: var(--ee-hai-muted) !important;
	padding: 8px 12px; font-weight: 600; cursor: pointer; margin-bottom: -1px;
}
.ee-hai-tab.is-active { color: var(--ee-hai-accent) !important; border-bottom-color: var(--ee-hai-accent); }
.ee-hai-panel { display: none; }
.ee-hai-panel.is-active { display: block; }

.ee-hai-field { margin-bottom: 14px; flex: 1 1 0; min-width: 0; }
.ee-hai-field label, .ee-hai-choices legend { display: block; font-weight: 600; font-size: 0.9em; margin-bottom: 4px; color: var(--ee-hai-text); }
.ee-hai-field input, .ee-hai-field select, .ee-hai-field textarea {
	width: 100%; padding: 8px 10px; height: auto; min-height: 40px; border: 1px solid var(--ee-hai-border); border-radius: 6px;
	background: #fff !important; color: var(--ee-hai-text) !important; font-size: 0.95em;
}
.ee-hai-row { display: flex; gap: 12px; flex-wrap: wrap; }
.ee-hai-row .ee-hai-field { min-width: 180px; }
.ee-hai-hint { font-size: 0.82em; color: var(--ee-hai-muted); margin: 4px 0 0; }

.ee-hai-btn {
	display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 6px; cursor: pointer;
	border: 1px solid var(--ee-hai-border); background: #fff !important; color: var(--ee-hai-text) !important;
	font-weight: 600; font-size: 0.9em; text-decoration: none !important; line-height: 1.2;
}
.ee-hai-btn:hover { border-color: var(--ee-hai-accent); color: var(--ee-hai-accent) !important; }
.ee-hai-btn-primary { background: var(--ee-hai-accent) !important; border-color: var(--ee-hai-accent); color: #fff !important; padding: 10px 18px; font-size: 1em; }
.ee-hai-btn-primary:hover { background: var(--ee-hai-accent-hover) !important; color: #fff !important; }
.ee-hai-btn[disabled] { opacity: 0.6; cursor: wait; }
.ee-hai-btn-small { padding: 5px 10px; font-size: 0.82em; }
.ee-hai-cost-badge { background: rgba(255, 255, 255, 0.2); border-radius: 999px; padding: 2px 8px; font-size: 0.8em; }

.ee-hai-status { margin: 14px 0 0; font-weight: 600; color: var(--ee-hai-accent); }
.ee-hai-status.is-error, .ee-hai-error { color: var(--ee-hai-danger); }
.ee-hai-result { margin-top: 18px; }

.ee-hai-list { list-style: none; padding: 0; margin: 0 0 16px; }
.ee-hai-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--ee-hai-border); }
.ee-hai-view-btn { background: none !important; border: 0; padding: 0; color: var(--ee-hai-accent) !important; font-weight: 600; cursor: pointer; text-align: left; }
.ee-hai-list-meta { color: var(--ee-hai-muted); font-size: 0.85em; }

/* Form extras. */
.ee-hai-app {
	--ee-hai-ai: #1d4ed8;
	--ee-hai-ai-bg: #eff6ff;
	--ee-hai-res: #b45309;
	--ee-hai-res-bg: #fffbeb;
}
.ee-hai-choices { border: 0; padding: 0; margin: 4px 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.ee-hai-choices legend { width: 100%; display: block; font-weight: 600; font-size: 0.9em; margin-bottom: 4px; }
.ee-hai-choice, .ee-hai-check {
	display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--ee-hai-border); border-radius: 8px;
	padding: 8px 12px; cursor: pointer; font-size: 0.92em; background: #fff;
}
.ee-hai-check { margin: 0 0 14px; }
.ee-hai-choice input, .ee-hai-check input { width: auto; min-height: 0; margin: 3px 0 0; flex: none; }
.ee-hai-choice:has(input:checked), .ee-hai-check:has(input:checked) { border-color: var(--ee-hai-accent); background: #eff6ff; }
.ee-hai-more { margin: 0 0 16px; }
.ee-hai-more summary { cursor: pointer; font-weight: 600; font-size: 0.9em; color: var(--ee-hai-accent); margin-bottom: 10px; }

/* Activity view. */
.ee-hai-item-header h3 { margin: 0 0 4px; }
.ee-hai-item-meta { color: var(--ee-hai-muted); font-size: 0.9em; margin: 0 0 6px; }
.ee-hai-upsell-source-note { font-size: 0.85em; font-style: italic; color: var(--ee-hai-muted); margin: 0 0 6px; }
.ee-hai-patterns { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.ee-hai-permalink { font-size: 0.85em; margin: 0 0 10px; }
.ee-hai-tag { display: inline-block; font-size: 0.75em; font-weight: 700; border-radius: 999px; padding: 1px 8px; background: #ede9fe; color: #5b21b6; }

.ee-hai-incomplete { background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px; padding: 12px 14px; margin: 10px 0; }
.ee-hai-incomplete p { margin: 0 0 8px; }

.ee-hai-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0 16px; padding: 10px 0; border-top: 1px solid var(--ee-hai-border); border-bottom: 1px solid var(--ee-hai-border); }
.ee-hai-toolbar-label { font-size: 0.82em; color: var(--ee-hai-muted); margin-left: 8px; }
.ee-hai-view-switch { display: inline-flex; gap: 0; }
.ee-hai-view-switch .ee-hai-btn:first-child { border-radius: 6px 0 0 6px; }
.ee-hai-view-switch .ee-hai-btn:last-child { border-radius: 0 6px 6px 0; margin-left: -1px; }
.ee-hai-view-mode.is-active { background: var(--ee-hai-accent) !important; border-color: var(--ee-hai-accent); color: #fff !important; }

.ee-hai-overview { font-size: 1.02em; }

/* Stages at a glance: one chip per stage, coloured by lane. */
.ee-hai-flow { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; counter-reset: none; }
.ee-hai-flow-step {
	position: relative; flex: 1 1 140px; min-width: 0; display: grid; gap: 2px;
	border-radius: 8px; padding: 8px 10px 8px 36px; border: 1px solid; font-size: 0.85em;
}
.ee-hai-flow-step.ee-hai-lane-ai_integrated { background: var(--ee-hai-ai-bg); border-color: #bfdbfe; }
.ee-hai-flow-step.ee-hai-lane-ai_resistant { background: var(--ee-hai-res-bg); border-color: #fcd34d; }
.ee-hai-flow-num {
	position: absolute; left: 8px; top: 8px; width: 20px; height: 20px; border-radius: 50%;
	display: grid; place-items: center; font-weight: 800; font-size: 0.8em; color: #fff;
}
.ee-hai-lane-ai_integrated .ee-hai-flow-num { background: var(--ee-hai-ai); }
.ee-hai-lane-ai_resistant .ee-hai-flow-num { background: var(--ee-hai-res); }
.ee-hai-flow-name { font-weight: 700; overflow-wrap: anywhere; }
.ee-hai-flow-lane, .ee-hai-flow-checks { color: var(--ee-hai-muted); font-size: 0.92em; }
.ee-hai-flow-checks::before { content: "\21A9\00a0"; }

.ee-hai-stages { list-style: none; padding: 0; margin: 14px 0 0; counter-reset: ee-hai-stage; }
.ee-hai-stage { counter-increment: ee-hai-stage; border: 1px solid var(--ee-hai-border); border-left-width: 5px; border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.ee-hai-stage.ee-hai-lane-ai_integrated { border-left-color: var(--ee-hai-ai); }
.ee-hai-stage.ee-hai-lane-ai_resistant { border-left-color: var(--ee-hai-res); }
.ee-hai-stage-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ee-hai-stage-name::before { content: counter(ee-hai-stage) ". "; }
.ee-hai-badge { display: inline-block; font-size: 0.72em; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.ee-hai-badge-ai_integrated { background: var(--ee-hai-ai-bg); color: var(--ee-hai-ai); border: 1px solid #bfdbfe; }
.ee-hai-badge-ai_resistant { background: var(--ee-hai-res-bg); color: #92400e; border: 1px solid #fcd34d; }
.ee-hai-badge-rule { background: #f1f5f9; color: #334155; border: 1px solid var(--ee-hai-border); }
.ee-hai-stage-time { font-size: 0.82em; color: var(--ee-hai-muted); margin-left: auto; }
.ee-hai-stage-timing { font-size: 0.85em; color: var(--ee-hai-muted); margin: 4px 0 0; }
.ee-hai-stage-instructions { margin: 6px 0 0; }
.ee-hai-stage-notes { margin-top: 8px; font-size: 0.88em; background: var(--ee-hai-surface); border-radius: 6px; padding: 8px 10px; }
.ee-hai-stage-notes p { margin: 0 0 4px; }
.ee-hai-stage-notes p:last-child { margin: 0; }

.ee-hai-section { margin: 20px 0 0; }
.ee-hai-section h4 { margin: 0 0 8px; display: flex; align-items: center; gap: 10px; }
.ee-hai-section h5 { margin: 14px 0 6px; }
.ee-hai-statement-text { background: var(--ee-hai-surface); border-radius: 6px; padding: 10px 12px; font-size: 0.95em; }
.ee-hai-link { background: none !important; border: 0; padding: 0; color: var(--ee-hai-accent) !important; font-weight: 600; font-size: 0.8em; cursor: pointer; text-decoration: underline; }

.ee-hai-artefact-brief { font-style: italic; }
.ee-hai-artefact-text { border: 1px solid var(--ee-hai-border); border-left: 4px solid #7c3aed; border-radius: 6px; padding: 12px 14px; background: #faf5ff; font-size: 0.95em; overflow-wrap: anywhere; }
.ee-hai-flaw { background: #fee2e2; color: inherit; border-radius: 3px; padding: 0 2px; }
.ee-hai-flaw sup { font-weight: 800; color: var(--ee-hai-danger); margin-left: 1px; }
.ee-hai-errors { padding-left: 1.4em; margin: 0; }
.ee-hai-errors li { margin-bottom: 10px; }
.ee-hai-errors q { font-weight: 600; }
.ee-hai-sev { display: inline-block; font-size: 0.72em; font-weight: 800; border-radius: 999px; padding: 1px 8px; margin-right: 6px; }
.ee-hai-sev-critical { background: #fee2e2; color: #991b1b; }
.ee-hai-sev-moderate { background: #fef3c7; color: #92400e; }
.ee-hai-sev-minor { background: #e2e8f0; color: #334155; }

.ee-hai-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.ee-hai-table th, .ee-hai-table td { border: 1px solid var(--ee-hai-border); padding: 6px 8px; text-align: left; vertical-align: top; }
.ee-hai-table th { background: var(--ee-hai-surface); }
.ee-hai-table td:nth-child(2) { white-space: nowrap; }
.ee-hai-integrity li { margin-bottom: 6px; }
.ee-hai-upsells { margin-top: 22px; }
.ee-hai-disclaimer { font-size: 0.8em; color: var(--ee-hai-muted); margin-top: 16px; }

.ee-hai-list { list-style: none; padding: 0; margin: 0 0 16px; }
.ee-hai-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--ee-hai-border); }
.ee-hai-view-btn { background: none !important; border: 0; padding: 0; color: var(--ee-hai-accent) !important; font-weight: 600; cursor: pointer; text-align: left; }
.ee-hai-list-meta { color: var(--ee-hai-muted); font-size: 0.85em; }

/* Student view hides the educator-only parts; educator view hides the plain student copy. */
.ee-hai-stu-only { display: none; }
.ee-hai-item.is-student-view .ee-hai-edu-only { display: none; }
.ee-hai-item.is-student-view .ee-hai-stu-only { display: block; }

@media (max-width: 600px) {
	.ee-hai-app { padding: 16px; }
	.ee-hai-toolbar-label { width: 100%; margin: 4px 0 0; }
	.ee-hai-flow-step { flex-basis: 100%; }
	.ee-hai-table td:nth-child(2) { white-space: normal; }
}