/* HelpLearnAI lesson-progress UI (work-stream 2). Injected by immersion/progress/inject.py.
   Uses the site's own design tokens so it blends with every page. */

.hla-progress-bar {
  margin: 0 0 22px;
  padding: 14px 18px;
  background: var(--card, #fff);
  border: 1px solid var(--line, #eadfce);
  border-radius: var(--radius-sm, 12px);
  box-shadow: var(--shadow, 0 10px 30px rgba(33, 49, 47, 0.08));
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
}

.hla-progress-bar .hla-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 0.95rem;
  color: var(--ink, #21312f);
}

.hla-progress-bar .hla-progress-label strong {
  font-family: var(--font-display, "Sora", sans-serif);
  font-size: 1.02rem;
}

.hla-progress-bar .hla-progress-count {
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft, #4a5d5a);
  white-space: nowrap;
}

.hla-progress-track {
  height: 10px;
  border-radius: 999px;
  background: var(--cream-deep, #fdf3e3);
  border: 1px solid var(--line, #eadfce);
  overflow: hidden;
}

.hla-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal, #0f766e), var(--teal-deep, #115e59));
  transition: width 0.6s ease;
}

.hla-progress-bar .hla-progress-resume {
  margin-top: 10px;
  font-size: 0.9rem;
}

.hla-progress-bar .hla-progress-resume a {
  color: var(--teal-deep, #115e59);
  text-decoration: none;
  font-weight: 600;
}

.hla-progress-bar .hla-progress-resume a:hover {
  text-decoration: underline;
}

/* In-flow "Mark lesson complete" button on lesson pages — sits below the
   last content card ("Your turn" / checkpoint) and above the prev/next cards */
.hla-complete-wrap {
  margin: 28px 0 12px;
  text-align: center;
}
#hla-complete-btn {
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 12px 26px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  color: #fff;
  background: var(--teal, #0f766e);
  box-shadow: 0 8px 20px rgba(15, 118, 110, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

#hla-complete-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(15, 118, 110, 0.45);
}

#hla-complete-btn:disabled {
  cursor: default;
  background: var(--teal-deep, #115e59);
  opacity: 0.92;
}

#hla-complete-btn.hla-done {
  background: var(--teal-soft, #d7efe9);
  color: var(--teal-deep, #115e59);
  border: 1px solid var(--teal, #0f766e);
  box-shadow: none;
}

@media (max-width: 640px) {
  #hla-complete-btn {
    padding: 10px 18px;
  }
}

/* "Continue learning" block on the account page */
#hla-continue-learning {
  margin-bottom: 36px;
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
}

#hla-continue-learning .hla-resume-card {
  background: var(--card, #fff);
  border: 1px solid var(--line, #eadfce);
  border-radius: var(--radius-sm, 12px);
  box-shadow: var(--shadow, 0 10px 30px rgba(33, 49, 47, 0.08));
  padding: 18px 20px;
  margin-bottom: 14px;
}

#hla-continue-learning .hla-resume-card h3 {
  margin: 0 0 6px;
  font-family: var(--font-display, "Sora", sans-serif);
  font-size: 1.05rem;
}

#hla-continue-learning .hla-resume-card .desc {
  margin: 0 0 12px;
  color: var(--ink-soft, #4a5d5a);
  font-size: 0.93rem;
}