/*
 * The level test: one glass card of one height for its three parts. Before: the three lines, the six levels, the start.
 * During: a bar (the clock, the six levels as numbered steps, «تمام»), the time as a line that empties, the level, the
 * question with the app's word floating over it after an answer. After: the level found large, a meter of six, the
 * app's lines, where to start, the ways on.
 */

.ltt { padding-block: 0 var(--section); }
.ltt-card { display: grid; min-height: clamp(560px, 52vw, 640px); padding: clamp(18px, 2.6vw, 34px); border-radius: var(--radius-card); background: var(--glass-strong); border: 1px solid var(--edge); box-shadow: var(--shadow-tile); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.ltt-intro, .ltt-run, .ltt-done { display: grid; gap: 20px; align-content: start; animation: ltt-in 320ms var(--ease-out); }
@keyframes ltt-in { from { opacity: 0; translate: 0 8px; filter: blur(3px); } }

/* before */
.ltt-intro { align-content: center; }
@media (min-width: 1024px) { .ltt-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 48px; } .ltt-go { grid-column: 1 / -1; } }
.ltt-how { display: grid; gap: 12px; align-content: start; }
.ltt-how li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; font-size: var(--text-headline); line-height: var(--lh-headline); font-weight: 700; }
.ltt-how li span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 800; }
.ltt-ladder { display: grid; gap: 10px; }
.ltt-ladder small { color: var(--fg-muted); font-size: var(--text-label); font-weight: 800; }
.ltt-ladder ol { display: grid; gap: 6px; }
.ltt-ladder li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: var(--text-callout); font-weight: 600; animation: ltt-in 360ms var(--ease-out) both; animation-delay: calc(var(--i) * 50ms); }
.ltt-ladder li b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--surface-muted); font-size: var(--text-label); }
.ltt-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.ltt-go > span { flex: 1 1 18rem; color: var(--fg-muted); font-size: var(--text-footnote); line-height: var(--lh-footnote); }

/* during */
.ltt-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.ltt-clock { display: inline-flex; align-items: center; gap: 8px; }
.ltt-clock .i { width: 20px; height: 20px; color: var(--accent); }
.ltt-clock small { color: var(--fg-muted); font-size: var(--text-label); font-weight: 700; }
.ltt-clock b { font-size: var(--text-title-2); font-weight: 800; font-variant-numeric: tabular-nums; }
.ltt-steps { display: flex; gap: 6px; }
.ltt-steps li { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--surface-muted); color: var(--fg-muted); font-size: var(--text-label); font-weight: 800; transition: background-color var(--d-default) ease, color var(--d-default) ease, scale var(--d-default) var(--ease-out); }
.ltt-steps li.past { background: var(--accent-soft); color: var(--accent-ink); }
.ltt-steps li.on { background: var(--accent); color: var(--on-accent); scale: 1.1; }
.ltt-time { display: block; height: 6px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--fg) 8%, transparent); overflow: hidden; }
.ltt-time i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: 100% 50%; transition: scale 1s linear; }
.ltt-level { color: var(--fg-muted); font-size: var(--text-footnote); font-weight: 700; }
.ltt-q { position: relative; }
.ltt-flash { position: absolute; inset-block-start: -6px; inset-inline-end: 0; padding: 6px 14px; border-radius: var(--radius-pill); font-size: var(--text-callout); font-weight: 800; opacity: 0; translate: 0 6px; transition: opacity 180ms var(--ease-out), translate 180ms var(--ease-out); pointer-events: none; }
.ltt-flash.on { opacity: 1; translate: 0 0; }
.ltt-flash.ok { background: var(--success-soft); color: var(--success-ink); }
.ltt-flash.no { background: var(--reward-soft); color: var(--reward-ink); }

/* after */
.ltt-done { justify-items: start; gap: 12px; }
.ltt-cap { color: var(--fg-muted); font-size: var(--text-label); font-weight: 800; }
.ltt-found { font-size: var(--text-hero); line-height: var(--lh-hero); font-weight: 800; }
.ltt-found span { color: var(--fg-faint); font-size: var(--text-title-1); }
.ltt-rank { font-size: var(--text-headline); font-weight: 700; }
.ltt-meter { display: flex; gap: 6px; }
.ltt-meter li { width: 42px; height: 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--fg) 10%, transparent); }
.ltt-meter li.on { background: var(--accent); }
.ltt-next { font-size: var(--text-callout); line-height: var(--lh-callout); }
.ltt-from { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius-tile); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--text-callout); font-weight: 700; }
.ltt-from .i { width: 20px; height: 20px; }
.ltt-app { max-width: 40rem; color: var(--fg-muted); font-size: var(--text-footnote); line-height: var(--lh-footnote); }
.ltt-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 6px; }
.ltt-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-ink); font-size: var(--text-footnote); font-weight: 800; }
.ltt-link .i { width: 15px; height: 15px; }
@media (prefers-reduced-motion: reduce) { .ltt-intro, .ltt-run, .ltt-done, .ltt-ladder li { animation: none; } .ltt-time i { transition: none; } }