/* =============================================================================
 * Tutor LMS, wearing Atlas.
 *
 * The course page, the lesson player and the dashboard are this theme's own
 * templates now, so most of Tutor's UI never renders. What is left is the part
 * this design does not specify and there is no reason to rebuild:
 *
 *   - the quiz runner, which the checkpoint rows link to
 *   - login, registration and the account screens under /account/
 *   - anything a future Tutor version decides to inject
 *
 * These rules bind Tutor's stable, documented class names to Atlas tokens.
 * Deliberately shallow: the repo's own notes warn that Tutor moves its
 * template hierarchy between versions, so a deep nested-div chain here is a
 * rule that breaks silently on the next update.
 * ========================================================================== */

/* ── Type and ground ──────────────────────────────────────────────────── */
.tutor-wrap,
.tutor-dashboard,
.tutor-quiz-wrap {
	font-family: var(--font-sans);
	color: var(--ink-700);
}

.tutor-wrap h1,
.tutor-wrap h2,
.tutor-wrap h3,
.tutor-wrap h4,
.tutor-dashboard h1,
.tutor-dashboard h2,
.tutor-dashboard h3 {
	font-family: var(--font-display);
	color: var(--ink-900);
	font-weight: 500;
	letter-spacing: -.012em;
}

/* Every quantity Tutor prints — counts, durations, scores — belongs in mono
 * with tabular figures, like every other quantity on the site. */
.tutor-meta-value,
.tutor-course-progress,
.tutor-quiz-question-count,
.tutor-timer-value {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: .01em;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.tutor-btn {
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .005em;
	min-height: 44px;
	border-radius: var(--radius-md);
	transition: background-color var(--dur-1) linear, color var(--dur-1) linear,
	            border-color var(--dur-1) linear, box-shadow var(--dur-2) var(--ease-out);
}

.tutor-btn-primary {
	background-color: var(--rope-600);
	border-color: var(--rope-600);
	color: var(--on-rope);
}

.tutor-btn-primary:hover,
.tutor-btn-primary:focus {
	background-color: var(--rope-700);
	border-color: var(--rope-700);
	color: var(--on-rope);
}

.tutor-btn-outline-primary,
.tutor-btn-secondary {
	background-color: var(--chalk-000);
	border-color: var(--hairline-strong);
	color: var(--ink-900);
}

.tutor-btn-outline-primary:hover,
.tutor-btn-secondary:hover {
	background-color: var(--chalk-000);
	border-color: var(--hairline-strong);
	color: var(--ink-900);
	box-shadow: var(--shadow-raise);
}

/* ── Surfaces and rules ───────────────────────────────────────────────── */
.tutor-card,
.tutor-dashboard-content,
.tutor-quiz-wrap {
	background: var(--chalk-000);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
}

.tutor-hr,
.tutor-dashboard-content hr { border-color: var(--hairline); }

/* ── Form fields ──────────────────────────────────────────────────────── */
.tutor-form-control,
.tutor-form-select {
	font-family: var(--font-sans);
	font-size: 16px; /* 16px or iOS zooms the page on focus */
	color: var(--ink-900);
	background: var(--chalk-000);
	border: 1px solid var(--hairline-strong);
	border-radius: var(--radius-sm);
	min-height: 44px;
	transition: border-color var(--dur-1) linear;
}

.tutor-form-control:focus,
.tutor-form-select:focus { border-color: var(--rope-600); }

/* ── Signals ──────────────────────────────────────────────────────────────
 * summit means finished and nothing else; alert means a failed attempt. Both
 * always carry a word in Tutor's own markup, so colour alone is never the
 * signal here either.
 * ------------------------------------------------------------------------ */
.tutor-badge-success,
.tutor-color-success { color: var(--summit-600); }
.tutor-badge-danger,
.tutor-color-danger { color: var(--alert-600); }

/* Focus is 2px solid focus-ring at 2px offset, and is never removed. */
.tutor-wrap :focus-visible,
.tutor-dashboard :focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}