/*
 * AH Academy: the "I finished this lesson" button, course progress bars and the My Account tabs
 * (My courses, My files, Membership). Light ground (account pages, lesson pages); logical
 * properties for RTL. Breakpoint 767.
 */

/* ---------- finished button ---------- */
.ah-done { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0; }
.ah-done .ah-done__btn.ah-btn {
	gap: 10px;
	border: 1px solid var(--ah-navy);
	background: transparent;
	color: var(--ah-navy);
}
.ah-done .ah-done__btn.ah-btn:hover,
.ah-done .ah-done__btn.ah-btn:focus-visible { background: var(--ah-navy); color: var(--ah-on-navy); }
.ah-done .ah-done__ic {
	position: relative;
	flex: none;
	width: 20px;
	height: 20px;
	border: 1.6px solid currentColor;
	border-radius: 50%;
	transition: background-color .25s, border-color .25s;
}
.ah-done .ah-done__ic::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 6px;
	width: 5px;
	height: 9px;
	border: solid transparent;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	transition: border-color .25s;
}
.ah-done.is-done .ah-done__btn.ah-btn { border-color: #1F7A4D; background: #1F7A4D; color: #fff; }
.ah-done.is-done .ah-done__btn.ah-btn:hover,
.ah-done.is-done .ah-done__btn.ah-btn:focus-visible { border-color: #17603C; background: #17603C; color: #fff; }
.ah-done.is-done .ah-done__ic { border-color: #fff; background: #fff; }
.ah-done.is-done .ah-done__ic::after { border-color: #1F7A4D; }
.ah-done.is-busy .ah-done__btn { opacity: .7; cursor: progress; }
.ah-done .ah-done__msg { font-size: .9rem; color: var(--ah-red); }
.ah-done .ah-done__msg:empty { display: none; }

/* ---------- progress bar ---------- */
.ah-acad-bar {
	position: relative;
	height: 8px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(15, 27, 60, .1);
}
.ah-acad-bar > i {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	display: block;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--ah-gold), var(--ah-gold-hi));
	transition: width .6s var(--ah-ease);
}
.ah-on-dark .ah-acad-bar { background: rgba(255, 255, 255, .14); }

/* ---------- chips ---------- */
.ah-acad-chip {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}
.ah-acad-chip.is-ok { background: rgba(31, 122, 77, .12); color: #17603C; }
.ah-acad-chip.is-warn { background: rgba(197, 165, 114, .22); color: var(--ah-ink-gold); }
.ah-acad-chip.is-off { background: rgba(10, 10, 10, .08); color: var(--ah-muted); }

/* ---------- My Account tabs ---------- */
.ah-acad-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.ah-acad-card,
.ah-acad-file {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	margin: 0;
	padding: 14px;
	border: 1px solid var(--ah-line);
	border-radius: 16px;
	background: #fff;
}
.ah-acad-file { grid-template-columns: minmax(0, 1fr) auto; padding: 16px 18px; }
.ah-acad-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 12px;
	background: linear-gradient(150deg, var(--ah-navy-2), var(--ah-deep));
}
.ah-acad-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ah-acad-card__mark { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--ah-f-display); font-size: 1.6rem; font-weight: 800; color: var(--ah-gold-hi); }
.ah-acad-card__body { display: grid; gap: 10px; min-width: 0; }
.ah-acad-card__t { margin: 0; font-family: var(--ah-f-display); font-size: 1.12rem; font-weight: 700; line-height: 1.45; }
.ah-acad-card__t a { color: var(--ah-ink); text-decoration: none; }
.ah-acad-card__t a:hover { color: var(--ah-ink-gold); }
.ah-acad-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font-size: .9rem; color: var(--ah-muted); }
.ah-acad-card__act { display: flex; flex-wrap: wrap; gap: 10px; }
.ah-acad-card__act .ah-btn { min-height: 0; padding: 9px 18px; font-size: .92rem; }
/* the outline button sits on a white card: navy text (it was cream, made for dark grounds) */
.ah-acad-card .ah-btn.ah-btn--line { border-color: rgba(15, 27, 60, .32); color: var(--ah-navy); }
.ah-acad-card .ah-btn.ah-btn--line:hover,
.ah-acad-card .ah-btn.ah-btn--line:focus-visible { border-color: var(--ah-navy); background: var(--ah-navy); color: var(--ah-on-navy); }
.ah-acad-note { margin: 0 0 14px; font-size: .92rem; color: var(--ah-muted); }
.ah-acad-kind { margin-inline-start: 6px; font-size: .78rem; color: var(--ah-muted); }
.ah-acad-table td { vertical-align: middle; }
.ah-acad-table .ah-btn { min-height: 0; padding: 7px 14px; font-size: .88rem; }
.ah-acad-empty {
	display: grid;
	justify-items: start;
	gap: 14px;
	padding: 28px;
	border: 1px dashed var(--ah-line);
	border-radius: 16px;
	background: var(--ah-paper);
}
.ah-acad-empty p { margin: 0; color: var(--ah-ink); }

@media (max-width: 767px) {
	.ah-acad-card { grid-template-columns: minmax(0, 1fr); }
	.ah-acad-file { grid-template-columns: minmax(0, 1fr); }
	.ah-acad-card__act .ah-btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.ah-acad-bar > i,
	.ah-done .ah-done__ic,
	.ah-done .ah-done__ic::after { transition: none; }
}