/* English Tenses Trainer — frontend styles.
   Everything is scoped under .ett-app so nothing leaks onto the theme,
   and every custom property/class uses the ett- prefix. */

.ett-app {
	--ett-bg: #f8f6f1;
	--ett-card: #ffffff;
	--ett-text: #262320;
	--ett-muted: #7a7468;
	--ett-border: #e6e0d4;
	--ett-primary: #1f6f5c;
	--ett-primary-contrast: #ffffff;
	--ett-success: #1f8f5c;
	--ett-error: #b23a2e;
	--ett-gold: #b8862e;
	--ett-past: #6b5b7e;
	--ett-present: #1f6f5c;
	--ett-future: #b8862e;
	--ett-radius: 16px;
	--ett-radius-sm: 10px;
	--ett-shadow: 0 1px 2px rgba(38, 35, 32, 0.05), 0 4px 12px rgba(38, 35, 32, 0.05);
	--ett-font: inherit;

	all: initial;
	display: block;
	font-family: var(--ett-font);
	background: var(--ett-bg);
	color: var(--ett-text);
	border-radius: var(--ett-radius);
	max-width: 480px;
	margin: 0 auto;
	overflow: hidden;
	box-sizing: border-box;
	line-height: 1.65;
	font-size: 15px;
	letter-spacing: 0.005em;
}

.ett-app[data-dark="true"] {
	--ett-bg: #16181d;
	--ett-card: #1f232b;
	--ett-text: #eeece6;
	--ett-muted: #9b978c;
	--ett-border: #30343d;
	--ett-primary: #3fa085;
	--ett-past: #9683b3;
	--ett-present: #3fa085;
	--ett-future: #d4a94a;
	--ett-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.ett-app * ,
.ett-app *::before,
.ett-app *::after {
	box-sizing: border-box;
	font-family: inherit;
}

@media (min-width: 700px) {
	.ett-app { max-width: 900px; }
}
@media (min-width: 1000px) {
	.ett-app { max-width: 1100px; }
}

.ett-app [dir="ltr"] {
	direction: ltr;
	text-align: left;
	unicode-bidi: isolate;
}

.ett-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 60px 20px;
	color: var(--ett-muted);
}

.ett-spinner {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 3px solid var(--ett-border);
	border-top-color: var(--ett-primary);
	animation: ett-spin 0.8s linear infinite;
}

@keyframes ett-spin {
	to { transform: rotate(360deg); }
}

/* Layout shell */
.ett-shell {
	display: flex;
	flex-direction: column;
	min-height: 480px;
}

.ett-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	border-bottom: 1px solid var(--ett-border);
	background: var(--ett-card);
}

.ett-topbar-title {
	font-weight: 700;
	font-size: 17px;
	letter-spacing: -0.01em;
}

.ett-topbar-actions {
	display: flex;
	gap: 8px;
}

.ett-icon-btn {
	border: none;
	background: transparent;
	color: var(--ett-muted);
	font-size: 18px;
	cursor: pointer;
	padding: 6px;
	border-radius: 8px;
	line-height: 1;
}
.ett-icon-btn:hover { background: var(--ett-border); }

.ett-view {
	padding: 16px;
	padding-bottom: 90px;
}

.ett-bottom-nav {
	position: sticky;
	bottom: 0;
	display: flex;
	background: var(--ett-card);
	border-top: 1px solid var(--ett-border);
	padding: 6px 4px;
}

.ett-nav-btn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	border: none;
	background: transparent;
	color: var(--ett-muted);
	font-size: 11px;
	padding: 6px 2px;
	cursor: pointer;
	border-radius: 10px;
}
.ett-nav-btn .ett-nav-icon { font-size: 18px; }
.ett-nav-btn.ett-active { color: var(--ett-primary); }

/* Cards */
.ett-card {
	background: var(--ett-card);
	border: 1px solid var(--ett-border);
	border-radius: var(--ett-radius);
	box-shadow: var(--ett-shadow);
	padding: 18px;
	margin-bottom: 14px;
	border-inline-start: 3px solid transparent;
}

.ett-card.ett-cat-PRESENT { border-inline-start-color: var(--ett-present); }
.ett-card.ett-cat-PAST { border-inline-start-color: var(--ett-past); }
.ett-card.ett-cat-FUTURE { border-inline-start-color: var(--ett-future); }

.ett-card-title {
	font-weight: 700;
	font-size: 15px;
	margin: 0 0 8px;
	letter-spacing: -0.005em;
}

.ett-muted { color: var(--ett-muted); font-size: 13px; }

/* Buttons */
.ett-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: none;
	border-radius: var(--ett-radius-sm);
	padding: 12px 18px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	background: var(--ett-primary);
	color: var(--ett-primary-contrast);
	width: 100%;
	transition: transform 0.08s ease, opacity 0.15s ease;
}
.ett-btn:active { transform: scale(0.98); }
.ett-btn:focus-visible { outline: 2px solid var(--ett-primary); outline-offset: 2px; }
.ett-btn.ett-btn-secondary {
	background: transparent;
	color: var(--ett-primary);
	border: 1px solid var(--ett-border);
}
.ett-btn.ett-btn-danger { background: var(--ett-error); }
.ett-btn.ett-btn-sm { padding: 8px 12px; font-size: 13px; width: auto; }

/* Home */
.ett-greeting { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.ett-progress-bar-track {
	background: var(--ett-border);
	border-radius: 999px;
	height: 8px;
	overflow: hidden;
	margin: 8px 0;
}
.ett-progress-bar-fill {
	background: var(--ett-primary);
	height: 100%;
	border-radius: 999px;
	transition: width 0.3s ease;
}

.ett-stat-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	text-align: center;
}
.ett-stat-row .ett-stat-value { font-size: 20px; font-weight: 700; }
.ett-stat-row .ett-stat-label { font-size: 11px; color: var(--ett-muted); }

/* Tense grid */
.ett-tense-group-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--ett-muted);
	margin: 18px 0 8px;
	text-transform: uppercase;
}
.ett-tense-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
@media (min-width: 700px) {
	.ett-tense-grid { grid-template-columns: repeat(3, 1fr); }
}
.ett-tense-card {
	background: var(--ett-card);
	border: 1px solid var(--ett-border);
	border-radius: var(--ett-radius-sm);
	padding: 14px 12px;
	cursor: pointer;
	text-align: right;
	border-top: 3px solid var(--ett-border);
	transition: border-color 0.15s ease;
}
.ett-tense-card.ett-cat-PRESENT { border-top-color: var(--ett-present); }
.ett-tense-card.ett-cat-PAST { border-top-color: var(--ett-past); }
.ett-tense-card.ett-cat-FUTURE { border-top-color: var(--ett-future); }
.ett-tense-card .ett-tense-name-en { font-weight: 700; font-size: 13px; direction: ltr; text-align: left; }
.ett-tense-card .ett-tense-name-fa { font-size: 12px; color: var(--ett-muted); }
.ett-mastery-badge {
	display: inline-block;
	margin-top: 6px;
	font-size: 10px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--ett-border);
	color: var(--ett-muted);
}
.ett-mastery-badge.ett-m-strong,
.ett-mastery-badge.ett-m-mastered { background: rgba(31, 169, 113, 0.15); color: var(--ett-success); }
.ett-mastery-badge.ett-m-good { background: rgba(59, 110, 246, 0.12); color: var(--ett-primary); }

/* Timeline visual */
.ett-timeline {
	direction: ltr;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 22px 6px;
	overflow-x: auto;
	position: relative;
}
.ett-timeline-line {
	flex: 1;
	height: 2px;
	background: var(--ett-border);
	position: relative;
}
.ett-timeline-line.ett-now-marker::after {
	content: "NOW";
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--ett-muted);
}
.ett-timeline-dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--ett-primary);
	flex-shrink: 0;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ett-primary) 18%, transparent);
}
.ett-timeline.ett-cat-PRESENT .ett-timeline-dot { background: var(--ett-present); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ett-present) 18%, transparent); }
.ett-timeline.ett-cat-PAST .ett-timeline-dot { background: var(--ett-past); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ett-past) 18%, transparent); }
.ett-timeline.ett-cat-FUTURE .ett-timeline-dot { background: var(--ett-future); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ett-future) 18%, transparent); }
.ett-timeline-now {
	font-size: 10px;
	color: var(--ett-muted);
	flex-shrink: 0;
}

/* Formula block */
.ett-formula-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px dashed var(--ett-border);
	direction: ltr;
	text-align: left;
	font-size: 13px;
}
.ett-formula-row:last-child { border-bottom: none; }
.ett-formula-label { color: var(--ett-muted); font-size: 11px; direction: rtl; }

/* Examples */
.ett-example {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 0;
	border-bottom: 1px solid var(--ett-border);
}
.ett-example:last-child { border-bottom: none; }
.ett-example-en { direction: ltr; text-align: left; font-weight: 600; font-size: 14px; }
.ett-example-fa { color: var(--ett-muted); font-size: 13px; margin-top: 2px; }
.ett-audio-btn {
	border: none;
	background: var(--ett-border);
	border-radius: 50%;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	cursor: pointer;
	color: var(--ett-text);
}

/* Keywords */
.ett-keyword-chip {
	display: inline-block;
	background: var(--ett-border);
	border-radius: 999px;
	padding: 4px 10px;
	font-size: 12px;
	margin: 3px;
	direction: ltr;
}

/* Mistakes */
.ett-mistake-wrong { color: var(--ett-error); direction: ltr; text-align: left; }
.ett-mistake-right { color: var(--ett-success); direction: ltr; text-align: left; }

/* Practice */
.ett-question-text { font-size: 16px; font-weight: 600; direction: ltr; text-align: left; margin-bottom: 16px; }
.ett-option-btn {
	display: block;
	width: 100%;
	text-align: left;
	direction: ltr;
	border: 1px solid var(--ett-border);
	background: var(--ett-card);
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 8px;
	cursor: pointer;
	font-size: 14px;
}
.ett-option-btn:hover { border-color: var(--ett-primary); }
.ett-option-btn.ett-correct { border-color: var(--ett-success); background: rgba(31, 169, 113, 0.1); }
.ett-option-btn.ett-incorrect { border-color: var(--ett-error); background: rgba(224, 72, 62, 0.1); }
.ett-fill-input, .ett-translate-input {
	width: 100%;
	direction: ltr;
	text-align: left;
	padding: 12px;
	border-radius: 10px;
	border: 1px solid var(--ett-border);
	background: var(--ett-card);
	color: var(--ett-text);
	font-size: 14px;
	margin-bottom: 10px;
}
.ett-builder-words {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	direction: ltr;
	margin-bottom: 12px;
	min-height: 44px;
	border: 1px dashed var(--ett-border);
	border-radius: 10px;
	padding: 8px;
}
.ett-builder-bank {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	direction: ltr;
}
.ett-word-chip {
	border: 1px solid var(--ett-border);
	background: var(--ett-card);
	border-radius: 8px;
	padding: 6px 10px;
	cursor: pointer;
	font-size: 13px;
}
.ett-word-chip.ett-used { opacity: 0.35; pointer-events: none; }

.ett-feedback { border-radius: 10px; padding: 12px; margin: 12px 0; font-size: 14px; }
.ett-feedback.ett-ok { background: rgba(31, 169, 113, 0.12); color: var(--ett-success); }
.ett-feedback.ett-bad { background: rgba(224, 72, 62, 0.12); color: var(--ett-error); }
.ett-feedback-explain { color: var(--ett-text); font-size: 13px; margin-top: 6px; }

.ett-progress-dots { display: flex; gap: 4px; margin-bottom: 14px; }
.ett-progress-dot { flex: 1; height: 4px; border-radius: 999px; background: var(--ett-border); }
.ett-progress-dot.ett-done { background: var(--ett-primary); }

/* Compare */
.ett-compare-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	direction: ltr;
}
.ett-compare-col { border: 1px solid var(--ett-border); border-radius: 10px; padding: 10px; }

/* Review / mistakes lists */
.ett-list-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--ett-border);
}
.ett-list-row:last-child { border-bottom: none; }
.ett-badge-count {
	background: var(--ett-error);
	color: #fff;
	border-radius: 999px;
	font-size: 11px;
	padding: 2px 8px;
}

/* Onboarding */
.ett-onboard-option {
	display: block;
	width: 100%;
	border: 1px solid var(--ett-border);
	border-radius: 10px;
	padding: 14px;
	margin-bottom: 8px;
	background: var(--ett-card);
	cursor: pointer;
	text-align: right;
	font-size: 14px;
}
.ett-onboard-option.ett-selected { border-color: var(--ett-primary); background: rgba(59, 110, 246, 0.08); }

/* Toggle switch (settings) */
.ett-setting-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--ett-border); }
.ett-setting-row:last-child { border-bottom: none; }
.ett-switch { position: relative; width: 42px; height: 24px; }
.ett-switch input { opacity: 0; width: 0; height: 0; }
.ett-switch-track { position: absolute; inset: 0; background: var(--ett-border); border-radius: 999px; cursor: pointer; transition: background 0.2s; }
.ett-switch-track::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s; }
.ett-switch input:checked + .ett-switch-track { background: var(--ett-primary); }
.ett-switch input:checked + .ett-switch-track::before { transform: translateX(-18px); }
[dir="ltr"] .ett-switch input:checked + .ett-switch-track::before { transform: translateX(18px); }

.ett-timer-badge {
	position: sticky;
	top: 0;
	text-align: center;
	font-size: 24px;
	font-weight: 700;
	padding: 8px 0;
	color: var(--ett-primary);
}

.ett-empty-state { text-align: center; padding: 40px 16px; color: var(--ett-muted); }

.ett-quickcheck-item { padding-bottom: 10px; border-bottom: 1px dashed var(--ett-border); }
.ett-quickcheck-item:last-child { border-bottom: none; padding-bottom: 0; }
.ett-quickcheck-item .ett-option-btn { margin-bottom: 6px; padding: 9px 12px; font-size: 13px; }

.ett-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}