/* Advanced Eigenvalues & Eigenvectors Calculator — teal & navy theme */

.aec-root {
	--aec-teal: #0f766e;
	--aec-teal-dark: #0b4f4a;
	--aec-teal-soft: #e6f5f3;
	--aec-navy: #0b2545;
	--aec-navy-light: #123a68;
	--aec-navy-soft: #eef2f8;
	--aec-ink: #10233c;
	--aec-muted: #5b6b82;
	--aec-border: #d6e0ea;
	--aec-danger: #b3261e;
	--aec-radius: 10px;

	box-sizing: border-box;
	max-width: 980px;
	margin: 2em auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--aec-ink);
	background: #ffffff;
	border: 1px solid var(--aec-border);
	border-radius: var(--aec-radius);
	/* Deliberately NOT overflow:hidden here — that would establish a
	   clipping/scroll container that breaks position:sticky on descendants
	   (e.g. .aec-eigen-label) with respect to page scroll. Rounded corners
	   are instead clipped per-element below (.aec-header, .aec-body). */
	box-shadow: 0 1px 3px rgba(11, 37, 69, 0.08);
}

.aec-root *, .aec-root *::before, .aec-root *::after { box-sizing: border-box; }

.aec-header {
	background: linear-gradient(135deg, var(--aec-navy) 0%, var(--aec-navy-light) 100%);
	color: #fff;
	padding: 1.4em 1.6em;
	border-radius: var(--aec-radius) var(--aec-radius) 0 0;
}

.aec-header h2 {
	margin: 0 0 0.15em;
	font-size: 1.35em;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #fff;
}

.aec-header p {
	margin: 0;
	color: #cfe0ea;
	font-size: 0.92em;
}

.aec-body {
	padding: 1.6em;
}

.aec-controls-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1em 1.4em;
	align-items: flex-end;
	margin-bottom: 1.4em;
}

.aec-field label {
	display: block;
	font-size: 0.78em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--aec-navy);
	margin-bottom: 0.35em;
}

.aec-field select {
	border: 1.5px solid var(--aec-border);
	border-radius: 6px;
	padding: 0.5em 0.7em;
	font-size: 0.95em;
	background: #fff;
	color: var(--aec-ink);
	max-width: 100%;
}

.aec-size-controls {
	display: flex;
	align-items: center;
	gap: 0.6em;
	flex-wrap: wrap;
}

.aec-custom-size-field {
	display: flex;
	align-items: center;
	gap: 0.5em;
	flex-wrap: wrap;
}

.aec-custom-size-field input[type="number"] {
	width: 5em;
	border: 1.5px solid var(--aec-border);
	border-radius: 6px;
	padding: 0.5em 0.6em;
	font-size: 0.95em;
	color: var(--aec-ink);
	background: #fff;
}

.aec-custom-size-field input[type="number"]:focus {
	outline: none;
	border-color: var(--aec-teal);
	box-shadow: 0 0 0 3px var(--aec-teal-soft);
}

.aec-custom-hint {
	font-size: 0.76em;
	color: var(--aec-muted);
	white-space: nowrap;
}

/* Toggle switch */
.aec-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	cursor: pointer;
	user-select: none;
	padding-bottom: 0.15em;
}

.aec-toggle-input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.aec-toggle-track {
	position: relative;
	width: 2.5em;
	height: 1.4em;
	background: #cbd5e1;
	border-radius: 999px;
	flex: 0 0 auto;
	transition: background 0.15s ease;
}

.aec-toggle-thumb {
	position: absolute;
	top: 0.15em;
	left: 0.15em;
	width: 1.1em;
	height: 1.1em;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(11, 37, 69, 0.35);
	transition: transform 0.15s ease;
}

.aec-toggle-input:checked + .aec-toggle-track {
	background: var(--aec-teal);
}
.aec-toggle-input:checked + .aec-toggle-track .aec-toggle-thumb {
	transform: translateX(1.1em);
}
.aec-toggle-input:focus-visible + .aec-toggle-track {
	box-shadow: 0 0 0 3px var(--aec-teal-soft);
}

.aec-toggle-text {
	font-size: 0.85em;
	font-weight: 600;
	color: var(--aec-navy);
	white-space: nowrap;
}

.aec-buttons {
	display: flex;
	gap: 0.6em;
	flex-wrap: wrap;
	margin-left: auto;
}

.aec-btn {
	appearance: none;
	border: 1.5px solid transparent;
	border-radius: 7px;
	padding: 0.55em 1.1em;
	font-size: 0.88em;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.05s ease, background 0.15s ease, box-shadow 0.15s ease;
	line-height: 1.2;
	white-space: nowrap;
}

.aec-btn-sm {
	padding: 0.4em 0.8em;
	font-size: 0.8em;
}

.aec-btn:active { transform: translateY(1px); }

.aec-btn-primary {
	background: var(--aec-teal);
	color: #fff;
	box-shadow: 0 1px 2px rgba(15, 118, 110, 0.35);
}
.aec-btn-primary:hover { background: var(--aec-teal-dark); }

.aec-btn-ghost {
	background: #fff;
	color: var(--aec-navy);
	border-color: var(--aec-border);
}
.aec-btn-ghost:hover { border-color: var(--aec-navy); background: var(--aec-navy-soft); }

.aec-matrix-wrap {
	display: flex;
	gap: 2em;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-bottom: 1.6em;
	min-width: 0;
}

/* min-width: 0 is the actual fix here — flex items default to
   min-width: auto, which lets them grow to fit their content (the
   matrix grid) and refuse to shrink, so the overflow-x:auto below
   would never actually trigger and the grid just got clipped by
   .aec-root's overflow:hidden instead of becoming scrollable. */
.aec-matrix-col {
	min-width: 0;
	max-width: 100%;
	flex: 1 1 auto;
}

.aec-matrix-label {
	font-size: 0.8em;
	font-weight: 700;
	color: var(--aec-navy);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.6em;
}

.aec-matrix-frame {
	position: relative;
	display: flex;
	align-items: stretch;
	padding: 0.2em;
}

/* Shared horizontal-scroll treatment — used anywhere a row of numbers
   (the matrix grid, an eigenvector's components, ...) can end up wider
   than its card. min-width: 0 is the load-bearing part: flex/grid items
   default to min-width: auto, which lets them grow to fit their content
   and refuse to shrink, so overflow-x: auto below would otherwise never
   actually trigger — the content would just get silently clipped by an
   ancestor's overflow: hidden instead of becoming scrollable. */
.aec-hscroll {
	overflow-x: auto;
	min-width: 0;
	max-width: 100%;
	scrollbar-width: thin;
	scrollbar-color: var(--aec-teal) var(--aec-navy-soft);
}
.aec-hscroll::-webkit-scrollbar { height: 10px; }
.aec-hscroll::-webkit-scrollbar-track { background: var(--aec-navy-soft); border-radius: 6px; }
.aec-hscroll::-webkit-scrollbar-thumb { background: var(--aec-teal); border-radius: 6px; }
.aec-hscroll::-webkit-scrollbar-thumb:hover { background: var(--aec-teal-dark); }

/* Inset shadow cue so it's visually obvious there's more to scroll to
   (a plain box-shadow, not a pseudo-element, so it can't disturb the
   flex/grid layout that caused the original clipping bug). */
.aec-hscroll.is-scrollable {
	box-shadow: inset -14px 0 10px -10px rgba(11, 37, 69, 0.18);
}

.aec-scroll-hint {
	display: none;
	font-size: 0.78em;
	color: var(--aec-teal-dark);
	font-weight: 600;
	margin-top: 0.5em;
}

.aec-matrix-bracket {
	width: 10px;
	border: solid var(--aec-navy);
	flex: 0 0 auto;
}
.aec-matrix-bracket.left { border-width: 3px 0 3px 3px; border-radius: 4px 0 0 4px; }
.aec-matrix-bracket.right { border-width: 3px 3px 3px 0; border-radius: 0 4px 4px 0; }

.aec-matrix-grid {
	display: grid;
	gap: 0.4em;
	padding: 0.5em 0.6em;
}

.aec-matrix-grid input {
	width: 3.6em;
	text-align: center;
	padding: 0.4em 0.2em;
	border: 1.5px solid var(--aec-border);
	border-radius: 6px;
	font-size: 0.95em;
	font-variant-numeric: tabular-nums;
	color: var(--aec-ink);
	background: #fbfcfe;
}

.aec-matrix-grid input:focus {
	outline: none;
	border-color: var(--aec-teal);
	background: #fff;
	box-shadow: 0 0 0 3px var(--aec-teal-soft);
}

.aec-error-box {
	background: #fdecea;
	border: 1px solid #f3b9b3;
	color: var(--aec-danger);
	border-radius: 8px;
	padding: 0.8em 1em;
	font-size: 0.9em;
	margin-bottom: 1.2em;
}
.aec-error-box:empty { display: none; }

.aec-results { display: grid; gap: 1em; }
.aec-results:empty { display: none; }

.aec-card {
	border: 1px solid var(--aec-border);
	border-radius: 9px;
	/* Deliberately NOT overflow:hidden — it would break position:sticky on
	   descendants like .aec-eigen-label. Corners are clipped per-element
	   below (.aec-card-head) instead. */
	background: #fff;
}

.aec-card-head {
	background: var(--aec-navy-soft);
	color: var(--aec-navy);
	font-weight: 700;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.65em 1em;
	border-bottom: 1px solid var(--aec-border);
	border-radius: 9px 9px 0 0;
}

.aec-card-body { padding: 1em; }

.aec-poly {
	font-family: "Cambria Math", Cambria, Georgia, "Times New Roman", serif;
	font-size: 1.15em;
	color: var(--aec-ink);
	overflow-x: auto;
}

.aec-stat-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1.6em;
	font-size: 0.92em;
}
.aec-stat-row strong { color: var(--aec-navy); }

.aec-eigen-list { display: grid; gap: 0.9em; }

.aec-eigen-item {
	display: grid;
	grid-template-columns: minmax(220px, 300px) 1fr;
	gap: 1.2em;
	align-items: start;
	padding: 0.9em 1em;
	background: var(--aec-teal-soft);
	border-left: 4px solid var(--aec-teal);
	border-radius: 6px;
}

/*
 * Pins the λ label + multiplicity info near the top of the viewport while
 * the visitor scrolls through a tall stack of eigenvector rows next to it
 * (e.g. a high-multiplicity eigenvalue with 20-30 basis vectors).
 * `top` is offset a bit so it doesn't sit flush against the browser chrome.
 */
.aec-eigen-label {
	position: sticky;
	top: 12px;
	align-self: start;
	max-width: 100%;
}

.aec-eigen-value {
	font-weight: 700;
	color: var(--aec-teal-dark);
	font-size: 1.05em;
	white-space: nowrap;
}

.aec-eigen-meta {
	font-size: 0.78em;
	color: var(--aec-muted);
	margin-top: 0.3em;
	font-weight: 500;
	white-space: normal;
	line-height: 1.4;
}

.aec-vectors { display: grid; gap: 0.5em; min-width: 0; }

.aec-vector-row {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.9em;
	flex-wrap: wrap;
	min-width: 0;
}

.aec-vector-values {
	display: inline-flex;
	border: 1.5px solid var(--aec-navy);
	border-radius: 4px;
	/* also .aec-hscroll (added in JS) for overflow-x/min-width/scrollbar */
}
.aec-vector-values span {
	padding: 0.2em 0.6em;
	border-right: 1px solid var(--aec-border);
	font-variant-numeric: tabular-nums;
	background: #fff;
	flex: 0 0 auto;
}
.aec-vector-values span:last-child { border-right: none; }

.aec-badge {
	display: inline-block;
	padding: 0.15em 0.55em;
	border-radius: 20px;
	font-size: 0.72em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.aec-badge-yes { background: #e1f6ee; color: #0f7a4c; }
.aec-badge-no { background: #fdecea; color: var(--aec-danger); }
.aec-badge-info { background: var(--aec-navy-soft); color: var(--aec-navy); }

.aec-verify-list { list-style: none; margin: 0; padding: 0; font-size: 0.88em; display: grid; gap: 0.4em; }
.aec-verify-list li { display: flex; gap: 0.5em; align-items: baseline; }
.aec-check { color: #0f7a4c; font-weight: 700; }
.aec-cross { color: var(--aec-danger); font-weight: 700; }

.aec-note {
	font-size: 0.82em;
	color: var(--aec-muted);
	margin-top: 0.8em;
	line-height: 1.5;
}

.aec-export-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
}
.aec-export-row .aec-btn {
	flex: 1 1 auto;
	min-width: 9em;
}

.aec-footer {
	padding: 0.9em 1.6em;
	background: var(--aec-navy-soft);
	color: var(--aec-muted);
	font-size: 0.78em;
	text-align: center;
	border-top: 1px solid var(--aec-border);
}

.aec-noscript { padding: 1em; color: var(--aec-danger); }

/* ===================== Responsive breakpoints ===================== */

/* Tablets / small laptops */
@media (max-width: 900px) {
	.aec-root { margin: 1.2em auto; border-radius: 8px; }
	.aec-header { padding: 1.2em 1.3em; }
	.aec-body { padding: 1.3em; }
}

/* Tablets (portrait) */
@media (max-width: 768px) {
	.aec-header h2 { font-size: 1.2em; }
	.aec-controls-row {
		flex-direction: column;
		align-items: stretch;
		gap: 0.9em;
	}
	.aec-toggle { padding-bottom: 0; }
	.aec-buttons {
		margin-left: 0;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0.6em;
	}
	.aec-buttons .aec-btn { width: 100%; }
	.aec-eigen-item { grid-template-columns: 1fr; gap: 0.5em; }
	.aec-eigen-label { position: static; }
	.aec-stat-row { gap: 1em 1.6em; }
}

/* Phones */
@media (max-width: 480px) {
	.aec-root { margin: 0; border-radius: 0; border-left: none; border-right: none; }
	.aec-header { padding: 1em; }
	.aec-header h2 { font-size: 1.08em; }
	.aec-header p { font-size: 0.85em; }
	.aec-body { padding: 1em; }

	.aec-matrix-grid { gap: 0.3em; padding: 0.4em 0.4em; }
	.aec-matrix-grid input {
		width: 2.7em;
		padding: 0.35em 0.15em;
		font-size: 0.88em;
	}
	.aec-matrix-bracket { width: 6px; }

	.aec-buttons { grid-template-columns: 1fr 1fr; }
	.aec-btn { padding: 0.6em 0.6em; font-size: 0.85em; }

	.aec-card-body { padding: 0.85em; }
	.aec-poly { font-size: 1em; }
	.aec-eigen-value { font-size: 0.98em; white-space: normal; }
	.aec-vector-values span { padding: 0.2em 0.45em; font-size: 0.92em; }

	.aec-custom-size-field input[type="number"] { width: 4.2em; }
}

/* Very small phones */
@media (max-width: 360px) {
	.aec-matrix-grid input { width: 2.3em; font-size: 0.82em; }
	.aec-buttons { grid-template-columns: 1fr; }
}

/* Touch devices: slightly larger tap targets */
@media (hover: none) and (pointer: coarse) {
	.aec-btn { padding-top: 0.65em; padding-bottom: 0.65em; }
	.aec-matrix-grid input { padding-top: 0.5em; padding-bottom: 0.5em; }
	.aec-toggle-track { width: 2.8em; height: 1.55em; }
	.aec-toggle-thumb { width: 1.25em; height: 1.25em; }
	.aec-toggle-input:checked + .aec-toggle-track .aec-toggle-thumb { transform: translateX(1.25em); }
}