/* =============================================================================
   card-types.css — visual identity per item type (quiz / lesson / notebook)
   Loaded AFTER index.css. Cards carry data-item-type (card-type.js) and a
   .item-type-chip, so the types stay distinguishable on desktop where the
   emoji icons are hidden:
     • quiz     — blue   (border, accent strip, chip)
     • lesson   — green  (green start button, blue download button)
     • notebook — violet (violet start button, outlined violet download button)
   Same rules apply on the platform (home) and in «محتواي».
   ============================================================================= */
:root {
  --type-quiz: #3b82f6;
  --type-lesson: #10b981;
  --type-notebook: #8b5cf6;
}
html[data-theme="dark"],
html[data-theme="dark-slate"] {
  --type-quiz: #60a5fa;
  --type-lesson: #34d399;
  --type-notebook: #a78bfa;
}

.exam-card[data-item-type="quiz"] { --type-accent: var(--type-quiz); }
.exam-card[data-item-type="lesson"] { --type-accent: var(--type-lesson); }
.exam-card[data-item-type="notebook"] { --type-accent: var(--type-notebook); }

/* Type chip (desktop only — phones show the leading emoji instead). */
.item-type-chip {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 4px;
  margin-bottom: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--type-accent, var(--color-text-secondary));
  background: color-mix(in srgb, var(--type-accent, var(--color-primary)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--type-accent, var(--color-primary)) 35%, transparent);
}

@media (min-width: 641px) {
  /* Border colour + a 4px accent strip on the inline-start edge. */
  .exam-card[data-item-type] {
    border-color: color-mix(in srgb, var(--type-accent) 45%, var(--color-border));
    border-inline-start: 4px solid var(--type-accent);
  }
}

@media (max-width: 640px) {
  .item-type-chip { display: none; }
}

/* ── Lesson: green start, blue download (download used to be an inline style) ── */
.exam-card[data-item-type="lesson"] .start-btn:not(.desktop-download-btn) {
  background: var(--color-success);
  color: #fff;
}
.exam-card[data-item-type="lesson"] .desktop-download-btn {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

/* ── Notebook: violet start, outlined violet download ── */
.exam-card[data-item-type="notebook"] .start-btn:not(.desktop-download-btn) {
  background: linear-gradient(135deg, var(--type-notebook), color-mix(in srgb, var(--type-notebook) 70%, #000));
  color: #fff;
}
.exam-card[data-item-type="notebook"] .desktop-download-btn {
  background: transparent;
  color: var(--type-notebook);
  border: 2px solid var(--type-notebook);
  box-shadow: none;
}
.exam-card[data-item-type="notebook"] .desktop-download-btn:hover {
  background: color-mix(in srgb, var(--type-notebook) 14%, transparent);
}