/* ============================================================================
   tutorials.css — "/tutorials" (index) and "/tutorials/<slug>" (article).

   Source of truth: apps/editor/src/pages/resources/TutorialsPage.tsx. The
   index's page hero is PageShell/PageHero, whose rules live in marketing.css;
   the article has no hero and starts straight into <main>.

   Each rule is the resolved value of the Tailwind class list quoted above it;
   inline `style={{…}}` values are reproduced as-is.
   ========================================================================= */

/* ═══ Shared: the gradient art block ═══════════════════════════════════════ */

/* TutorialArt's wrapper carries the per-tutorial gradient inline; the image,
   the wash, and the grid stack on top of it. */
.tut-art { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
/* "absolute inset-0 h-full w-full object-cover mk-content-thumb-img"
   + transform scale(1.01) */
.tut-art__img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform: scale(1.01);
}
/* "absolute inset-0 bg-slate-950/15 dark:bg-slate-950/30" */
.tut-art__wash { position: absolute; inset: 0; background-color: rgba(2, 6, 23, 0.15); }
.mk-dark .tut-art__wash { background-color: rgba(2, 6, 23, 0.3); }
/* "absolute inset-0 opacity-20 mk-grid-bg" */
.tut-art__grid { position: absolute; inset: 0; opacity: 0.2; }

/* ═══ Shared: the level / duration / step-count row ════════════════════════ */

/* "flex items-center gap-2.5 flex-wrap" */
.tut-meta { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
/* "text-[10px] font-bold px-2 py-0.5 rounded-full border" + the level colours,
   which come from the status tokens so they follow the theme. */
.tut-meta__level {
  font-size: 10px;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid;
}
.tut-meta__level--beginner {
  color: var(--mk-status-ok);
  background: var(--mk-status-ok-bg);
  border-color: var(--mk-status-ok-bd);
}
.tut-meta__level--intermediate {
  color: var(--mk-status-accent);
  background: var(--mk-status-accent-bg);
  border-color: var(--mk-status-accent-bd);
}
/* "text-[11px] text-slate-500 dark:text-slate-600" */
.tut-meta__fact { font-size: 11px; color: #64748b; }
.mk-dark .tut-meta__fact { color: #475569; }

/* ═══ Index (/tutorials) ═══════════════════════════════════════════════════ */

/* "max-w-6xl mx-auto px-6 pb-28" */
.tuts {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 7rem;
}
/* "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 items-stretch" */
.tuts__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}
@media (min-width: 768px) { .tuts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tuts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* GlowCard + "rounded-2xl border border-slate-200/80 dark:border-white/6
    hover:border-indigo-400/40 transition-colors duration-300 overflow-hidden
    h-full" + background var(--mk-card-grad). `dark:border-white/6` generates
   no rule (6 is off Tailwind's opacity scale), so the slate-200/80 border
   stays in dark mode — see migration/PROJECT.md, "Reproduced quirks". */
.tut-card {
  border-radius: 1rem;
  border: 1px solid rgba(226, 232, 240, 0.8);
  transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  height: 100%;
  background: var(--mk-card-grad);
}
.tut-card:hover { border-color: rgba(129, 140, 248, 0.4); }
/* "group flex flex-col h-full" */
.tut-card__link { display: flex; flex-direction: column; height: 100%; }
/* "relative h-28 flex items-center justify-center overflow-hidden flex-shrink-0" */
.tut-card__art { height: 7rem; flex-shrink: 0; }
/* "p-6 flex flex-col flex-1" */
.tut-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1 1 0%; }
/* "text-xl font-bold text-slate-900 dark:text-white mt-3 mb-2
    group-hover:text-indigo-700 dark:group-hover:text-indigo-300
    transition-colors" + lineHeight 1.22 */
.tut-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  line-height: 1.22;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mk-dark .tut-card__title { color: #fff; }
.tut-card__link:hover .tut-card__title { color: #4338ca; }
.mk-dark .tut-card__link:hover .tut-card__title { color: #a5b4fc; }
/* "text-[13px] text-[#444444] dark:text-slate-500 leading-relaxed mb-4" */
.tut-card__desc { font-size: 13px; color: #444; line-height: 1.625; margin-bottom: 1rem; }
.mk-dark .tut-card__desc { color: #64748b; }
/* "mt-auto text-sm font-semibold text-indigo-600 dark:text-indigo-400
    group-hover:text-indigo-600 dark:group-hover:text-indigo-400 inline-flex
    items-center gap-1.5" — the hover colour equals the resting colour, so only
   the arrow moves. */
.tut-card__more {
  margin-top: auto;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: #4f46e5;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.mk-dark .tut-card__more { color: #818cf8; }
/* "group-hover:translate-x-1 transition-transform" */
.tut-card__arrow { transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.tut-card__link:hover .tut-card__arrow { transform: translateX(0.25rem); }

/* ═══ Article (/tutorials/<slug>) ══════════════════════════════════════════ */

/* "max-w-3xl mx-auto px-6 pt-32 pb-24" */
.tut {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  padding: 8rem 1.5rem 6rem;
}
/* "inline-flex items-center gap-2 text-sm text-[#000000] dark:text-slate-400
    hover:text-slate-900 dark:hover:text-white transition-colors mb-8" */
.tut__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #000;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 2rem;
}
.mk-dark .tut__back { color: #94a3b8; }
.tut__back:hover { color: #0f172a; }
.mk-dark .tut__back:hover { color: #fff; }
/* "h-36 rounded-2xl mb-8 relative overflow-hidden flex items-center justify-center" */
.tut__banner { height: 9rem; border-radius: 1rem; margin-bottom: 2rem; }
/* "text-[2.2rem] md:text-[2.75rem] font-black text-slate-900 dark:text-white
    tracking-tight mt-4 mb-5" + lineHeight 1.12, letterSpacing -0.03em */
.tut__title {
  font-size: 2.2rem;
  line-height: 1.12;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.03em;
  margin-top: 1rem;
  margin-bottom: 1.25rem;
}
.mk-dark .tut__title { color: #fff; }
@media (min-width: 768px) { .tut__title { font-size: 2.75rem; } }
/* "flex flex-col gap-4 mb-10" */
.tut__intro { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.5rem; }
/* "text-[15px] text-[#000000] dark:text-slate-400 leading-[1.85]" */
.tut__p { font-size: 15px; color: #000; line-height: 1.85; }
.mk-dark .tut__p { color: #94a3b8; }

/* "rounded-2xl border border-slate-200/80 dark:border-white/6 p-6 mb-12"
   + background var(--mk-tile) */
.tut__toc {
  border-radius: 1rem;
  border: 1px solid rgba(226, 232, 240, 0.8);
  padding: 1.5rem;
  margin-bottom: 3rem;
  background: var(--mk-tile);
}
/* "text-xs font-semibold text-slate-500 uppercase tracking-[0.16em] mb-4" */
.tut__toc-title {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 1rem;
}
/* "flex flex-col gap-2.5" */
.tut__toc-list { display: flex; flex-direction: column; gap: 0.625rem; }
/* "flex items-baseline gap-3 text-sm text-[#444444] dark:text-slate-400
    hover:text-slate-900 dark:hover:text-white transition-colors" */
.tut__toc-link {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #444;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mk-dark .tut__toc-link { color: #94a3b8; }
.tut__toc-link:hover { color: #0f172a; }
.mk-dark .tut__toc-link:hover { color: #fff; }
/* "text-[11px] font-bold text-indigo-600 dark:text-indigo-400 w-4 flex-shrink-0" */
.tut__toc-n { font-size: 11px; font-weight: 700; color: #4f46e5; width: 1rem; flex-shrink: 0; }
.mk-dark .tut__toc-n { color: #818cf8; }

/* "flex flex-col gap-12" */
.tut__steps { display: flex; flex-direction: column; gap: 3rem; }
/* scrollMarginTop 96px */
.tut__step { scroll-margin-top: 96px; }
/* "flex items-center gap-3.5 mb-4" */
.tut__step-head { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1rem; }
/* "w-8 h-8 rounded-full flex items-center justify-center text-[13px]
    font-bold text-indigo-600 dark:text-indigo-400 flex-shrink-0
    border border-indigo-400/25" + background rgba(99,102,241,0.1) */
.tut__step-n {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #4f46e5;
  flex-shrink: 0;
  border: 1px solid rgba(129, 140, 248, 0.25);
  background: rgba(99, 102, 241, 0.1);
}
.mk-dark .tut__step-n { color: #818cf8; }
/* "text-xl font-bold text-slate-900 dark:text-white" + letterSpacing -0.01em */
.tut__step-title {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.mk-dark .tut__step-title { color: #fff; }
/* "flex flex-col gap-3.5 sm:pl-[46px]" */
.tut__step-body { display: flex; flex-direction: column; gap: 0.875rem; }
@media (min-width: 640px) { .tut__step-body { padding-left: 46px; } }
/* "rounded-xl border p-4 mt-1" + background/borderColor inline */
.tut__tip {
  border-radius: 0.75rem;
  border: 1px solid rgba(99, 102, 241, 0.25);
  padding: 1rem;
  margin-top: 0.25rem;
  background: rgba(99, 102, 241, 0.06);
}
/* "text-[13px] leading-relaxed text-slate-700 dark:text-slate-300" */
.tut__tip p { font-size: 13px; line-height: 1.625; color: #334155; }
.mk-dark .tut__tip p { color: #cbd5e1; }
/* "font-bold text-indigo-600 dark:text-indigo-400" */
.tut__tip-label { font-weight: 700; color: #4f46e5; }
.mk-dark .tut__tip-label { color: #818cf8; }

/* "grid grid-cols-1 sm:grid-cols-2 gap-4 mt-16 pt-10 border-t
    border-slate-200/80 dark:border-white/6" */
.tut__nav {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
}
@media (min-width: 640px) { .tut__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* "rounded-xl border border-slate-200 dark:border-white/8
    hover:border-indigo-400/40 transition-colors p-5" + background
   var(--mk-tile). `dark:border-white/8` generates no rule — slate-200 stays. */
.tut__nav-card {
  display: block;
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  padding: 1.25rem;
  background: var(--mk-tile);
}
.tut__nav-card:hover { border-color: rgba(129, 140, 248, 0.4); }
.tut__nav-card--next { }
@media (min-width: 640px) { .tut__nav-card--next { text-align: right; } }
/* The empty first cell when there is no previous tutorial: "hidden sm:block" */
.tut__nav-spacer { display: none; }
@media (min-width: 640px) { .tut__nav-spacer { display: block; } }
/* "text-[11px] text-indigo-600 dark:text-indigo-400 mb-1.5" */
.tut__nav-kicker { font-size: 11px; color: #4f46e5; margin-bottom: 0.375rem; }
.mk-dark .tut__nav-kicker { color: #818cf8; }
/* "text-sm font-semibold text-slate-900 dark:text-white" */
.tut__nav-title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: #0f172a; }
.mk-dark .tut__nav-title { color: #fff; }

/* "text-center mt-14" + "text-xs text-slate-500 dark:text-slate-600 mt-4" */
.tut__cta { text-align: center; margin-top: 3.5rem; }
.tut__cta-note { font-size: 0.75rem; line-height: 1rem; color: #64748b; margin-top: 1rem; }
.mk-dark .tut__cta-note { color: #475569; }
/* "text-indigo-600 dark:text-indigo-400 hover:text-indigo-600
    dark:hover:text-indigo-400" — hover equals resting, no visible change. */
.tut__cta-note a { color: #4f46e5; }
.mk-dark .tut__cta-note a { color: #818cf8; }