/* Shared component styles */

/* ─── Module cards (home screen) ─── */

.module-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 640px) {
  .module-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.module-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-fast), border-color var(--duration-fast),
    transform var(--duration-fast);
}

.module-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-light);
  transform: translateY(-1px);
}

.module-card:active {
  transform: translateY(0);
}

.module-card__progress-ring {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
}

.module-card__progress-ring circle {
  fill: none;
  stroke-width: 4;
}

.module-card__progress-ring .track {
  stroke: var(--progress-track);
}

.module-card__progress-ring .fill {
  stroke: var(--progress-fill);
  stroke-linecap: round;
  transition: stroke-dashoffset var(--duration-normal) var(--ease-out);
}

.module-card__icon {
  font-size: var(--text-xl);
}

.module-card__body {
  flex: 1;
  min-width: 0;
}

.module-card__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin-bottom: 2px;
}

.module-card__meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ─── Lesson list ─── */

.lesson-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.lesson-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-fast);
}

.lesson-item:hover {
  background: var(--bg-card-hover);
}

.lesson-item__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--bg-input);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
}

.lesson-item__number--done {
  background: var(--success-muted);
  color: var(--success);
}

.lesson-item__body {
  flex: 1;
  min-width: 0;
}

.lesson-item__title {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}

.lesson-item__tips {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.lesson-item__chevron {
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ─── Tip cards ─── */

.tip-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.tip-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.tip-card__source {
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: var(--bg-input);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.tip-card__bookmark {
  color: var(--text-muted);
  transition: color var(--duration-fast);
  flex-shrink: 0;
}

.tip-card__bookmark:hover,
.tip-card__bookmark--active {
  color: var(--warning);
}

.tip-card__content {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-secondary);
}

.tip-card__content p {
  margin-bottom: var(--space-sm);
}

.tip-card__content strong {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.tip-card__content code {
  background: var(--bg-code);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.85em;
}

/* Code block inside tip cards */
.tip-card__code {
  position: relative;
  margin-top: var(--space-sm);
  background: var(--bg-code);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.tip-card__code pre {
  padding: var(--space-md);
  overflow-x: auto;
  font-size: var(--text-sm);
  line-height: 1.6;
  -webkit-overflow-scrolling: touch;
}

.tip-card__code-copy {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--text-muted);
  opacity: 0;
  transition: opacity var(--duration-fast);
}

.tip-card__code:hover .tip-card__code-copy {
  opacity: 1;
}

.tip-card__code-copy--copied {
  color: var(--success);
}

/* Try-it prompt */
.tip-card__try-it {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--accent-muted);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--accent);
}

.tip-card__try-it-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Mastery toggle */
.tip-card__mastery {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.mastery-btn {
  flex: 1;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-align: center;
  border: 1px solid var(--border);
  transition: all var(--duration-fast);
}

.mastery-btn:hover {
  border-color: var(--border-light);
}

.mastery-btn--learned {
  background: var(--accent-secondary-muted);
  border-color: var(--accent-secondary);
  color: var(--accent-secondary);
}

.mastery-btn--practicing {
  background: var(--warning-muted);
  border-color: var(--warning);
  color: var(--warning);
}

.mastery-btn--mastered {
  background: var(--success-muted);
  border-color: var(--success);
  color: var(--success);
}

/* ─── Quiz ─── */

.quiz {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-top: var(--space-xl);
}

.quiz__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-lg);
}

.quiz__question {
  margin-bottom: var(--space-lg);
}

.quiz__question-text {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-md);
}

.quiz__question-number {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

.quiz__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.quiz__option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--duration-fast);
}

.quiz__option:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-light);
}

.quiz__option--selected {
  border-color: var(--accent);
  background: var(--accent-muted);
}

.quiz__option--correct {
  border-color: var(--success);
  background: var(--success-muted);
  color: var(--success);
}

.quiz__option--wrong {
  border-color: var(--error);
  background: var(--error-muted);
  color: var(--error);
}

.quiz__option-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  border: 2px solid var(--border);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
}

.quiz__option--selected .quiz__option-marker {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bg-primary);
}

.quiz__explanation {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.quiz__submit {
  display: block;
  width: 100%;
  margin-top: var(--space-lg);
  padding: var(--space-sm) var(--space-lg);
  background: var(--accent);
  color: #fff;
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  transition: background var(--duration-fast);
}

.quiz__submit:hover {
  background: var(--accent-hover);
}

.quiz__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.quiz__result {
  text-align: center;
  padding: var(--space-lg);
}

.quiz__score {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--accent);
}

.quiz__score-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ─── Progress ring (reusable SVG) ─── */

.progress-ring {
  transform: rotate(-90deg);
}

.progress-ring__track {
  fill: none;
  stroke: var(--progress-track);
}

.progress-ring__fill {
  fill: none;
  stroke: var(--progress-fill);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s var(--ease-out);
}

/* ─── Search ─── */

.search-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  padding-left: 40px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  color: var(--text-primary);
  transition: border-color var(--duration-fast);
}

.search-input:focus {
  border-color: var(--accent);
  outline: none;
}

.search-wrapper {
  position: relative;
}

.search-wrapper svg {
  position: absolute;
  left: var(--space-sm);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  width: 20px;
  height: 20px;
}

.search-results {
  margin-top: var(--space-md);
}

.search-empty {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--text-muted);
}

/* ─── Stats cards (progress dashboard) ─── */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.stat-card {
  padding: var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
}

.stat-card__value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--accent);
}

.stat-card__label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

/* ─── Buttons ─── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: all var(--duration-fast);
}

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

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

.btn--ghost {
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.btn--ghost:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-light);
}

/* ─── Lesson navigation ─── */

.lesson-nav {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.lesson-nav__btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  transition: background var(--duration-fast);
}

.lesson-nav__btn:hover {
  background: var(--bg-card-hover);
}

.lesson-nav__btn--next {
  justify-content: flex-end;
  text-align: right;
}

.lesson-nav__btn-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.lesson-nav__btn-title {
  font-weight: var(--weight-medium);
}

/* ─── Empty states ─── */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xl) var(--space-lg);
  text-align: center;
  color: var(--text-muted);
}

.empty-state__icon {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-md);
}

.empty-state__text {
  font-size: var(--text-base);
}