/**
 * QuranTrack frontend app — mobile-first, theme-independent, accessible.
 * Loaded only on pages containing QuranTrack shortcodes.
 */

.qt-app {
	/* Palette — a quiet, dignified identity for a Qur'an memorization
	 * space: deep mosque-green paired with a restrained brass/gold accent
	 * used ONLY as the signature highlight, on a warm paper background. */
	--qt-primary: #1a6b4a;
	--qt-primary-dark: #124a34;
	--qt-primary-deep: #0d3826;
	--qt-accent-soft: #e8f2ec;
	--qt-gold: #b08a3e;
	--qt-gold-soft: #f6efdf;
	--qt-header-grad-a: #17614a;
	--qt-header-grad-b: #0d3826;
	--qt-card: #ffffff;
	--qt-text: #1a2b24;
	--qt-danger: #b32d2e;
	--qt-warning: #996800;
	--qt-info: #2271b1;
	--qt-muted: #667a72;
	--qt-border: #dde5e1;
	--qt-border-soft: #eef2f0;
	--qt-bg: #f4f7f5;
	--qt-radius: 14px;
	--qt-radius-sm: 9px;

	/* Spacing scale — one consistent rhythm, so nothing floats. */
	--qt-s1: 4px;
	--qt-s2: 8px;
	--qt-s3: 12px;
	--qt-s4: 16px;
	--qt-s5: 24px;
	--qt-s6: 32px;

	--qt-shadow: 0 1px 2px rgb(13 56 38 / 5%), 0 4px 16px rgb(13 56 38 / 4%);
	--qt-shadow-sm: 0 1px 2px rgb(13 56 38 / 6%);
	max-width: 720px;
	margin-inline: auto;
	padding: 16px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--qt-text);
	background: var(--qt-bg);

	/* Isolation contract: the portal must not inherit the surrounding
	 * theme's fonts, colors, or spacing, and must not leak its own into
	 * the theme's header/footer. This block is scoped ENTIRELY to
	 * .qt-app, so the theme chrome outside it is never touched. */
	font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Arabic", sans-serif;
	border-radius: var(--qt-radius);

	/* Establish independent stacking + layout contexts so theme z-index,
	 * floats, and containing-block quirks cannot reach inside. */
	position: relative;
	z-index: 0;
	isolation: isolate;
	contain: layout style;
}

/* Reset inherited typography ONLY inside the portal, so a theme's global
 * h1/p/a/button rules don't override the portal's own components. */
.qt-app :where( h1, h2, h3, h4, p, ul, ol, li, figure, blockquote ) {
	margin: 0;
	padding: 0;
	font-family: inherit;
	color: inherit;
}

.qt-app :where( a ) {
	color: var(--qt-primary);
	text-decoration: none;
}

.qt-app :where( button, input, select, textarea ) {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

.qt-app *,
.qt-app *::before,
.qt-app *::after {
	box-sizing: border-box;
}

.qt-app__header {
	position: relative;
	margin-block-end: var(--qt-s5);
	padding: var(--qt-s5) var(--qt-s5) var(--qt-s4);
	background: linear-gradient( 135deg, var(--qt-header-grad-a), var(--qt-header-grad-b) );
	border-radius: var(--qt-radius);
	color: #fff;
	overflow: hidden;
}

/* Signature: a thin brass rule at the top edge — the one gold moment. */
.qt-app__header::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: linear-gradient( 90deg, var(--qt-gold), #d9bd7a );
}

.qt-app__title {
	margin: 0 0 var(--qt-s1);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #fff;
}

.qt-app__subtitle {
	margin: 0;
	color: rgb(255 255 255 / 82%);
	font-size: 0.95rem;
}

.qt-back {
	display: inline-block;
	margin-block-end: 6px;
	text-decoration: none;
	font-weight: 600;
}

/* ---- Cards / notices ---- */

.qt-card {
	background: var(--qt-card);
	border: 1px solid var(--qt-border);
	border-radius: var(--qt-radius);
	padding: var(--qt-s5);
	margin-block-end: var(--qt-s4);
	box-shadow: var(--qt-shadow-sm);
}

.qt-card__title {
	margin: 0 0 var(--qt-s4);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--qt-text);
	letter-spacing: -0.01em;
	padding-inline-start: var(--qt-s3);
	border-inline-start: 3px solid var(--qt-gold);
	line-height: 1.2;
}

.qt-notice {
	border-inline-start: 4px solid var(--qt-primary);
	background: var(--qt-card);
	border-radius: 6px;
	padding: 12px 16px;
	margin-block-end: 16px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.qt-notice--error {
	border-inline-start-color: var(--qt-danger);
}

.qt-notice--success {
	border-inline-start-color: var(--qt-primary);
}

/* ---- Toolbar / fields ---- */

.qt-toolbar {
	display: flex;
	gap: var(--qt-s3);
	flex-wrap: wrap;
	margin-block-end: var(--qt-s4);
	padding: var(--qt-s4);
	background: var(--qt-card);
	border: 1px solid var(--qt-border);
	border-radius: var(--qt-radius);
	box-shadow: var(--qt-shadow-sm);
}

/* Visual completion bar: two clear counters over a slim track, replacing a
 * faint grey "Completed: 3 · Pending: 2" line the eye used to skate past. */
.qt-progress-bar {
	display: grid;
	grid-template-columns: auto auto 1fr;
	align-items: center;
	gap: var(--qt-s4);
	margin-block-end: var(--qt-s4);
	padding: var(--qt-s3) var(--qt-s4);
	background: var(--qt-card);
	border: 1px solid var(--qt-border);
	border-radius: var(--qt-radius);
	box-shadow: var(--qt-shadow-sm);
}

.qt-progress-bar__stat {
	display: flex;
	align-items: baseline;
	gap: var(--qt-s2);
	white-space: nowrap;
}

.qt-progress-bar__num {
	font-size: 1.35rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.qt-progress-bar__stat--done .qt-progress-bar__num { color: var(--qt-primary); }
.qt-progress-bar__stat--pending .qt-progress-bar__num { color: var(--qt-muted); }

.qt-progress-bar__word {
	font-size: 0.85rem;
	color: var(--qt-muted);
	font-weight: 500;
}

.qt-progress-bar__track {
	block-size: 8px;
	background: var(--qt-border-soft);
	border-radius: 999px;
	overflow: hidden;
}

.qt-progress-bar__fill {
	display: block;
	block-size: 100%;
	background: linear-gradient( 90deg, var(--qt-primary), var(--qt-primary-dark) );
	border-radius: 999px;
	transition: inline-size 0.3s ease;
}

@media ( max-width: 480px ) {
	.qt-progress-bar {
		grid-template-columns: auto auto;
	}
	.qt-progress-bar__track {
		grid-column: 1 / -1;
	}
}

.qt-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 160px;
}

/* A standalone field inside a fieldset (Notes) needs breathing room above. */
.qt-fieldset > .qt-field {
	margin-block-start: 12px;
	flex: 1 1 100%;
}

.qt-field__label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--qt-muted);
}

.qt-input {
	min-height: 46px; /* comfortable touch target */
	padding: 10px 12px;
	border: 1px solid var(--qt-border);
	border-radius: 8px;
	font-size: 1rem;
	width: 100%;
	background: var(--qt-card);
	color: var(--qt-text);
	box-sizing: border-box;
	line-height: 1.4;
	appearance: none;
}

/* Selects need room for the native arrow so the value never overlaps it. */
select.qt-input {
	padding-inline-end: 32px;
	background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23646970' d='M1 1l5 5 5-5'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: left 12px center;
	cursor: pointer;
}

html[dir="rtl"] select.qt-input {
	background-position: left 12px center;
}

.qt-input:focus {
	outline: 2px solid var(--qt-primary);
	outline-offset: 1px;
}

/* ---- Buttons ---- */

.qt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 8px 16px;
	border-radius: 8px;
	border: 1px solid var(--qt-border);
	background: var(--qt-card);
	color: var(--qt-text);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.qt-btn:focus-visible {
	outline: 2px solid var(--qt-primary);
	outline-offset: 2px;
}

.qt-btn--primary {
	background: var(--qt-primary);
	border-color: var(--qt-primary);
	color: #fff;
}

.qt-btn--primary:hover {
	background: var(--qt-primary-dark);
}

.qt-btn--large {
	width: 100%;
	font-size: 1.1rem;
}

.qt-btn--ghost {
	border-color: transparent;
	color: var(--qt-primary);
	background: transparent;
}

.qt-btn[disabled] {
	opacity: 0.6;
	cursor: wait;
}

/* Quick attendance buttons: color + text (never color alone). */

.qt-btn--status.is-selected {
	outline: 3px solid currentColor;
}

.qt-btn--present { color: var(--qt-primary); }
.qt-btn--absent  { color: var(--qt-danger); }
.qt-btn--late    { color: var(--qt-warning); }
.qt-btn--excused { color: var(--qt-muted); }

/* ---- Student list ---- */

.qt-progress-line {
	font-weight: 600;
	margin-block-end: 8px;
}

.qt-student-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.qt-student-card {
	background: var(--qt-card);
	border: 1px solid var(--qt-border);
	border-radius: var(--qt-radius);
	padding: var(--qt-s4);
	margin-block-end: var(--qt-s3);
	box-shadow: var(--qt-shadow-sm);
	transition: box-shadow 0.15s ease;
}

.qt-student-card:hover {
	box-shadow: var(--qt-shadow);
}

/* A slim status rail on the leading edge: green = done, neutral = pending.
 * One quiet cue, not a loud full border. */
.qt-student-card.is-done {
	border-inline-start: 3px solid var(--qt-primary);
}

.qt-student-card.is-pending {
	border-inline-start: 3px solid var(--qt-border);
}

.qt-student-card__main {
	display: flex;
	align-items: baseline;
	gap: var(--qt-s2);
	flex-wrap: wrap;
	margin-block-end: var(--qt-s3);
}

.qt-student-card__name {
	font-weight: 700;
	font-size: 1.1rem;
	text-decoration: none;
	color: var(--qt-text);
	letter-spacing: -0.01em;
}

.qt-student-card__name:hover {
	color: var(--qt-primary);
}

.qt-student-card__meta {
	color: var(--qt-muted);
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

.qt-student-card__meta::before {
	content: "·";
	margin-inline-end: var(--qt-s2);
	color: var(--qt-border);
}

/* Push the status chip to the far edge of the row. */
.qt-student-card__main [data-qt-state] {
	margin-inline-start: auto;
}

/* Quick-attendance: one connected segmented control. Buttons are plain
 * until hovered/selected — no floating colored ticks. The chosen state
 * fills with its own semantic color. */
.qt-student-card__actions {
	display: flex;
	gap: 0;
	flex-wrap: wrap;
	border: 1px solid var(--qt-border);
	border-radius: var(--qt-radius-sm);
	overflow: hidden;
}

.qt-student-card__actions .qt-btn {
	flex: 1 1 0;
	min-width: 64px;
	border: 0;
	border-inline-end: 1px solid var(--qt-border-soft);
	border-radius: 0;
	min-height: 48px;
	background: var(--qt-card);
	color: var(--qt-text);
	font-weight: 600;
	transition: background 0.12s ease, color 0.12s ease;
}

.qt-student-card__actions .qt-btn:last-child {
	border-inline-end: 0;
}

.qt-student-card__actions .qt-btn--status:hover {
	background: var(--qt-accent-soft); /* fallback */
	background: color-mix( in srgb, var(--qt-status-color, var(--qt-primary)) 12%, #fff );
	color: var(--qt-status-color, var(--qt-primary));
}

.qt-student-card__actions .qt-btn--status.is-selected {
	background: var(--qt-status-color, var(--qt-primary));
	color: #fff;
}

.qt-student-card__actions .qt-btn--ghost {
	flex: 1 1 100%;
	color: var(--qt-primary);
	font-weight: 700;
	background: var(--qt-accent-soft);
	min-width: 100%;
	border-block-start: 1px solid var(--qt-border-soft);
}

.qt-student-card__actions .qt-btn--ghost:hover {
	background: var(--qt-accent-soft); /* fallback */
	background: color-mix( in srgb, var(--qt-primary) 14%, #fff );
}

.qt-chip {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	padding: 3px 12px;
	font-size: 0.78rem;
	font-weight: 600;
	background: var(--qt-border-soft);
	color: var(--qt-muted);
	white-space: nowrap;
}

.qt-chip--done {
	background: var(--qt-accent-soft);
	color: var(--qt-primary-dark);
}

/* ---- Entry form ---- */

.qt-fieldset {
	border: 1px solid var(--qt-border);
	border-radius: var(--qt-radius);
	padding: 16px;
	margin: 0 0 16px;
	background: var(--qt-card);
}

.qt-fieldset__legend {
	font-weight: 700;
	font-size: 1.05rem;
	padding-inline: 8px;
	color: var(--qt-text);
}

/* Range rows (from surah/ayah → to surah/ayah) align as an even grid that
 * collapses to a single column on narrow screens instead of scattering. */
.qt-range-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 150px, 1fr ) );
	gap: 12px;
	align-items: end;
}

.qt-segmented {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.qt-segmented__option input {
	position: absolute;
	opacity: 0;
	width: 0;
}

.qt-segmented__option span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 18px;
	border: 1px solid var(--qt-border);
	border-radius: 999px;
	font-weight: 600;
	cursor: pointer;
}

.qt-segmented__option input:checked + span {
	background: var(--qt-primary);
	border-color: var(--qt-primary);
	color: #fff;
}

.qt-segmented__option input:focus-visible + span {
	outline: 2px solid var(--qt-primary-dark);
	outline-offset: 2px;
}

/* Colored selected state: the chosen status keeps its own semantic color
 * (set inline via --qt-status-color on the label) rather than a single
 * generic fill — so "Present" reads green, "Absent" red, at a glance. */
.qt-segmented__option {
	--qt-status-color: var(--qt-primary);
}

.qt-segmented__option input:checked + span {
	background: var(--qt-status-color, var(--qt-primary));
	border-color: var(--qt-status-color, var(--qt-primary));
	color: #fff;
}

/* Unselected options show a soft tint of their color so the palette is
 * legible before a choice is made (matches the teacher dashboard chips). */
.qt-segmented__option input:not(:checked) + span {
	border-inline-start: 4px solid var(--qt-status-color, var(--qt-border));
}

.qt-form-footer {
	margin-block-start: 8px;
}

.qt-live-region {
	min-height: 1.4em;
	font-weight: 600;
	margin-block-start: 8px;
}

.qt-live-region.is-error { color: var(--qt-danger); }
.qt-live-region.is-success { color: var(--qt-primary-dark); }

/* ---- History table ---- */

.qt-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.qt-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--qt-card);
	border: 1px solid var(--qt-border);
	border-radius: var(--qt-radius);
}

.qt-table th,
.qt-table td {
	padding: 10px 12px;
	border-block-end: 1px solid var(--qt-border);
	text-align: start;
	white-space: nowrap;
}

.qt-history-list {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}

.qt-history-list__item {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	padding-block: 8px;
	border-block-end: 1px solid var(--qt-border);
}

.qt-history-list__date {
	font-weight: 600;
	min-width: 90px;
}

.qt-pagination {
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: center;
	margin-block: 12px;
}

@media (min-width: 600px) {
	.qt-app { padding: 24px; }
	.qt-btn--large { width: auto; min-width: 220px; }
}

/* ---- Portals (Phase 5) ---- */

.qt-stat-grid {
	display: grid;
	/* Explicit 2-up on phones so it can never collapse to a single wasteful
	 * column (the old auto-fit did on some engines); 4-up from tablet. */
	grid-template-columns: repeat( 2, 1fr );
	gap: var(--qt-s3);
	margin-block-end: var(--qt-s5);
}

@media ( min-width: 560px ) {
	.qt-stat-grid {
		grid-template-columns: repeat( 4, 1fr );
	}
}

.qt-stat {
	background: var(--qt-card);
	border: 1px solid var(--qt-border);
	border-radius: var(--qt-radius-sm);
	padding: var(--qt-s4) var(--qt-s3);
	text-align: center;
	box-shadow: var(--qt-shadow-sm);
}

.qt-stat__value {
	display: block;
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--qt-primary-dark);
	font-variant-numeric: tabular-nums;
	margin-block-end: var(--qt-s1);
}

.qt-stat__label {
	color: var(--qt-muted);
	font-size: 0.8rem;
	font-weight: 500;
}

.qt-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}

.qt-empty {
	color: var(--qt-muted);
}

.qt-chip--unread {
	background: var(--qt-danger);
	color: #fff;
}

.qt-notification-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.qt-notification {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	padding-block: 10px;
	border-block-end: 1px solid var(--qt-border);
}

.qt-notification.is-unread {
	background: #f2f8f5;
	border-inline-start: 3px solid var(--qt-primary);
	padding-inline-start: 8px;
}

.qt-notification__message {
	margin: 2px 0;
}

.qt-notification__time {
	color: var(--qt-muted);
	font-size: 0.8rem;
}

/* ---- Badges (Phase 7) ---- */

.qt-badge-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.qt-badge-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border: 1px solid var(--qt-border);
	border-radius: 8px;
	background: #fffdf3;
}

.qt-badge-item__medal {
	font-size: 1.3rem;
}

.qt-badge-item__name {
	font-weight: 700;
	flex: 1;
}

.qt-badge-item__date {
	color: var(--qt-muted);
	font-size: 0.8rem;
}

/* ---- Unified login ---- */

.qt-login {
	display: flex;
	justify-content: center;
	padding: 24px 12px;
}

.qt-login__card {
	width: 100%;
	max-width: 420px;
}

.qt-login__form label {
	display: block;
	font-weight: 700;
	margin-bottom: 4px;
}

.qt-login__submit {
	width: 100%;
}

.qt-login__remember {
	font-weight: 400;
}

.qt-login__help {
	margin-top: 14px;
	color: var(--qt-muted);
	font-size: 0.85rem;
}

/* ---- Portal top bar (identity + logout) ---- */

.qt-portal-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
	padding: 8px 12px;
	border: 1px solid var(--qt-border);
	border-radius: 8px;
	background: var(--qt-card);
}

.qt-portal-bar__user {
	font-weight: 700;
}

.qt-portal-bar__logout {
	font-size: 0.85rem;
}

/* =====================================================================
 * v1.13.0 — Responsive grid system + themed shell components.
 * Contract: consume tokens only; presets restyle everything with zero
 * component changes. Grid: auto-fit columns, no manual breakpoints.
 * ===================================================================== */

.qt-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 12px;
}

.qt-grid--tight {
	grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
	gap: 10px;
}

.qt-grid--wide {
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

/* Themed portal header (gradient from tokens). */
.qt-app .qt-app__header,
.qt-app .qt-portal-bar {
	background: linear-gradient(135deg, var(--qt-header-grad-a), var(--qt-header-grad-b));
	color: #fff;
	border-radius: var(--qt-radius);
	padding: 14px 16px;
	border: 0;
}

.qt-app .qt-app__header .qt-app__title,
.qt-app .qt-portal-bar a {
	color: #fff;
}

.qt-app .qt-portal-bar a:hover {
	opacity: 0.85;
}

/* Soft accent surfaces (selected rows, highlights, chips). */
.qt-soft {
	background: var(--qt-accent-soft);
	border-radius: calc(var(--qt-radius) - 4px);
}

/* ---- Login screen ---- */
.qt-login-wrap {
	min-height: 60vh;
	display: grid;
	place-items: center;
	padding: 24px 12px;
	background:
		radial-gradient(1000px 400px at 50% -10%, var(--qt-accent-soft), transparent),
		var(--qt-bg);
	border-radius: var(--qt-radius);
}

.qt-login-card {
	width: min(400px, 100%);
	background: var(--qt-card);
	border: 1px solid var(--qt-border);
	border-radius: var(--qt-radius);
	padding: 26px 22px;
	box-shadow: 0 12px 30px rgb(0 0 0 / 8%);
}

.qt-login-card__brand {
	text-align: center;
	margin-block-end: 18px;
}

.qt-login-card__logo {
	width: 56px;
	height: 56px;
	margin-inline: auto;
	margin-block-end: 10px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--qt-header-grad-a), var(--qt-header-grad-b));
	color: #fff;
	font-size: 24px;
	font-weight: 700;
}

.qt-login-card input[type="text"],
.qt-login-card input[type="password"],
.qt-login-card input[type="email"] {
	width: 100%;
	font-size: 16px;
	padding: 12px;
	border-radius: calc(var(--qt-radius) - 4px);
	border: 1px solid var(--qt-border);
	background: var(--qt-bg);
	color: var(--qt-text);
}

.qt-login-card .qt-btn--primary {
	width: 100%;
	padding-block: 12px;
	font-size: 16px;
}

/* Dark presets: form controls inherit surfaces automatically. */
.qt-app input,
.qt-app select,
.qt-app textarea {
	background: var(--qt-card);
	color: var(--qt-text);
	border-color: var(--qt-border);
}

/* ---- Plan recitation blocks ---- */

.qt-plan-block {
	border-top: 1px solid var(--qt-border);
	padding-top: 14px;
	margin-top: 14px;
}

.qt-plan-block:first-of-type {
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
}

/* ---- Small screens: the portal is a phone-first daily tool ---- */

@media ( max-width: 480px ) {
	.qt-app {
		padding: 12px;
	}

	/* Stack the quick-attendance buttons two-per-row so labels stay
	 * readable and taps stay comfortable instead of cramming one line. */
	.qt-student-card__actions .qt-btn {
		flex: 1 1 calc( 50% - 1px );
		min-width: calc( 50% - 1px );
	}

	.qt-student-card__actions .qt-btn--ghost {
		flex: 1 1 100%;
		min-width: 100%;
	}

	/* Range rows go single-column so from/to fields never squeeze. */
	.qt-range-grid {
		grid-template-columns: 1fr;
	}

	.qt-student-card__main {
		row-gap: 4px;
	}

	/* Let the chip drop under the name instead of overflowing the row. */
	.qt-student-card__main [data-qt-state] {
		margin-inline-start: 0;
	}
}

/* ---- Student plan (read-only) ---- */

.qt-plan-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.qt-plan-list__item {
	border: 1px solid var(--qt-border);
	border-radius: var(--qt-radius-sm);
	padding: var(--qt-s4);
	background: var(--qt-accent-soft);
}

.qt-plan-list__head {
	display: flex;
	align-items: center;
	gap: var(--qt-s3);
	flex-wrap: wrap;
}

.qt-plan-list__head .qt-chip {
	flex: 0 0 auto;
	order: 2;
}

.qt-plan-list__pos {
	order: 1;
	font-weight: 600;
	font-size: 1rem;
}

.qt-plan-list__deficit {
	margin: 8px 0 0;
	color: var(--qt-warning);
	font-size: 0.9rem;
}

.qt-card__note {
	margin: 10px 0 0;
	color: var(--qt-muted);
	font-size: 0.85rem;
	font-style: italic;
}

/* ---- Teacher recitation updates (score + mistakes) ---- */

.qt-recitation-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.qt-recitation-item {
	border: 1px solid var(--qt-border);
	border-radius: 10px;
	padding: 12px;
	border-inline-start: 4px solid var(--qt-primary);
}

.qt-recitation-item__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-block-end: 8px;
}

.qt-recitation-item__score {
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--qt-primary-dark);
	background: var(--qt-accent-soft);
	border-radius: 999px;
	padding: 2px 14px;
}

.qt-recitation-item__range {
	font-size: 0.95rem;
	margin-block-end: 8px;
}

.qt-recitation-item__label {
	color: var(--qt-muted);
	font-weight: 600;
}

.qt-mistake-list {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.qt-mistake-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--qt-bg);
	border: 1px solid var(--qt-border);
	border-radius: 999px;
	padding: 3px 10px;
	font-size: 0.85rem;
}

.qt-mistake-chip__count {
	font-weight: 700;
	color: var(--qt-danger);
	background: var(--qt-card);
	border-radius: 999px;
	min-width: 20px;
	text-align: center;
}

.qt-recitation-item__notes {
	margin: 8px 0 0;
	color: var(--qt-muted);
	font-size: 0.9rem;
}

/* ==================================================================== */
/* Board ([qurantrack_board]) — isolated wrapper + mode chrome          */
/* ==================================================================== */

/* The board reuses .qt-app isolation; .qtb-wrap adds board-only chrome.
 * Constrained reset so the theme can't bleed into board controls, and the
 * board can't leak out — all values come from --qt-* tokens. */
.qtb-wrap {
	color: var(--qt-text);
}

.qtb-wrap * {
	box-sizing: border-box;
}

/* ---- Mode tabs (internal nav) ---- */

.qtb-tabs {
	display: flex;
	gap: var(--qt-s1);
	flex-wrap: wrap;
	margin-block-end: var(--qt-s4);
	padding: var(--qt-s1);
	background: var(--qt-border-soft);
	border-radius: var(--qt-radius-sm);
}

.qtb-tab {
	flex: 1 1 auto;
	text-align: center;
	padding: var(--qt-s3) var(--qt-s3);
	border-radius: var(--qt-radius-sm);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--qt-muted);
	white-space: nowrap;
	transition: background 0.12s ease, color 0.12s ease;
}

.qtb-tab:hover {
	color: var(--qt-primary);
}

.qtb-tab.is-active {
	background: var(--qt-card);
	color: var(--qt-primary-dark);
	box-shadow: var(--qt-shadow-sm);
}

/* ---- Toolbar (halqah + date) ---- */

.qtb-toolbar {
	display: flex;
	gap: var(--qt-s3);
	flex-wrap: wrap;
	margin-block-end: var(--qt-s4);
	padding: var(--qt-s4);
	background: var(--qt-card);
	border: 1px solid var(--qt-border);
	border-radius: var(--qt-radius);
	box-shadow: var(--qt-shadow-sm);
}

/* ---- Student picker (daily mode) ---- */

.qtb-student-picker {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--qt-s2);
}

.qtb-student-picker__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--qt-s2);
	padding: var(--qt-s4);
	border: 1px solid var(--qt-border);
	border-radius: var(--qt-radius-sm);
	text-decoration: none;
	color: var(--qt-text);
	background: var(--qt-card);
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.qtb-student-picker__item:hover {
	border-color: var(--qt-primary);
	box-shadow: var(--qt-shadow-sm);
}

.qtb-student-picker__item.is-done {
	border-inline-start: 3px solid var(--qt-primary);
}

.qtb-student-picker__name {
	font-weight: 600;
}

.qtb-entry-head {
	margin-block-end: var(--qt-s4);
}

.qtb-entry-head__name {
	margin: var(--qt-s2) 0 0;
	font-size: 1.2rem;
	font-weight: 700;
}

/* ---- Halqah summary list ---- */

.qt-summary-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.qt-summary-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--qt-s3) 0;
	border-block-end: 1px solid var(--qt-border-soft);
}

.qt-summary-list li:last-child {
	border-block-end: 0;
}

.qt-summary-list__label {
	color: var(--qt-muted);
}

.qt-summary-list__value {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ---- Class tools ---- */

.qtb-tools {
	display: grid;
	gap: var(--qt-s4);
}

.qtb-picker__display {
	text-align: center;
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--qt-primary-dark);
	padding: var(--qt-s5);
	background: var(--qt-accent-soft);
	border-radius: var(--qt-radius);
	margin-block-end: var(--qt-s4);
	min-block-size: 3em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.qtb-picker__display.is-flash {
	animation: qtb-flash 0.4s ease;
}

@keyframes qtb-flash {
	0% { transform: scale( 0.94 ); opacity: 0.5; }
	100% { transform: scale( 1 ); opacity: 1; }
}

.qtb-picker__actions,
.qtb-timer__actions,
.qtb-timer__presets {
	display: flex;
	gap: var(--qt-s2);
	flex-wrap: wrap;
	margin-block-end: var(--qt-s3);
}

.qtb-picker__progress {
	text-align: center;
	color: var(--qt-muted);
	font-variant-numeric: tabular-nums;
	margin: 0;
}

.qtb-timer__display {
	text-align: center;
	font-size: 3rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--qt-primary-dark);
	margin-block-end: var(--qt-s4);
}

.qtb-timer__display.is-done {
	color: var(--qt-danger);
	animation: qtb-flash 0.4s ease;
}

.qtb-groups__result {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 140px, 1fr ) );
	gap: var(--qt-s3);
	margin-block-start: var(--qt-s4);
}

.qtb-group {
	border: 1px solid var(--qt-border);
	border-radius: var(--qt-radius-sm);
	padding: var(--qt-s3);
	background: var(--qt-bg);
}

.qtb-group__title {
	margin: 0 0 var(--qt-s2);
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--qt-primary-dark);
}

.qtb-group__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.qtb-group__list li {
	padding: var(--qt-s1) 0;
	font-size: 0.9rem;
}