/* ============================================================================
   templates.css — the template gallery (/templates and
   /templates/category/<slug>).

   Source of truth: apps/editor/src/pages/TemplatePicker.tsx. Every rule is the
   resolved value of the Tailwind class list quoted above it.

   NOTE ON `ring-*`: Tailwind's ring utilities emit
   `box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)`
   and rely on the `--tw-*` bootstrap that base.css deliberately omits
   (PROJECT.md). Resolved by hand here: with the default 0px
   offset width, `ring-N <color>` is exactly `box-shadow: 0 0 0 Npx <color>`.
   Copying the utility verbatim would have produced NO ring at all, because an
   undefined custom property invalidates the whole declaration.
   ========================================================================= */

/* `hidden` must outrank the display rules in this file — Preflight's
   `[hidden]{display:none}` is only (0,1,0), the same weight as a class, and
   everything below is emitted after it. Without this, `.tpl-card{display:block}`
   un-hides every paginated-away card and the gallery renders all 60 at once
   (PROJECT.md). */
.tpl [hidden] { display: none; }

/* "flex flex-col min-h-screen w-full" + background var(--mk-bg) */
.tpl {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  background: var(--mk-bg);
}

/* ═══ Header ═══════════════════════════════════════════════════════════════ */

/* "pt-32 pb-6 px-8 text-center" */
.tpl__head { padding: 8rem 2rem 1.5rem; text-align: center; }
/* "text-4xl font-bold text-slate-900 dark:text-white mb-3 tracking-tight" */
.tpl__title {
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.75rem;
  letter-spacing: -0.025em;
}
.mk-dark .tpl__title { color: #fff; }
/* "text-[#000000] dark:text-slate-400 text-lg max-w-xl mx-auto" */
.tpl__intro {
  color: #000;
  font-size: 1.125rem;
  line-height: 1.75rem;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}
.mk-dark .tpl__intro { color: #94a3b8; }

/* ═══ Search ═══════════════════════════════════════════════════════════════ */

/* "px-8 mb-4 max-w-md mx-auto w-full" */
.tpl__search {
  padding-left: 2rem;
  padding-right: 2rem;
  margin-bottom: 1rem;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
/* "w-full bg-white dark:bg-white/5 border border-slate-300 dark:border-white/10
    rounded-full px-4 py-2 text-sm text-slate-900 dark:text-white
    placeholder:text-[#444444] dark:placeholder:text-slate-500 shadow-sm
    outline-none focus:border-blue-500 transition-colors" */
.tpl__search input {
  width: 100%;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #0f172a;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  outline: 2px solid transparent;
  outline-offset: 2px;
  font-family: inherit;
  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);
}
.tpl__search input::placeholder { color: #444; }
.tpl__search input:focus { border-color: #3b82f6; }
.mk-dark .tpl__search input { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); color: #fff; }
.mk-dark .tpl__search input::placeholder { color: #64748b; }

/* ═══ Category chips ═══════════════════════════════════════════════════════ */

/* "px-8 mb-8 overflow-x-auto" */
.tpl__filters { padding-left: 2rem; padding-right: 2rem; margin-bottom: 2rem; overflow-x: auto; }
/* "flex gap-2 min-w-max mx-auto justify-center" */
.tpl__filters-inner {
  display: flex;
  gap: 0.5rem;
  min-width: max-content;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}
/* "px-3 py-1.5 rounded-full text-sm font-medium transition-all whitespace-nowrap"
   + inactive "text-[#444444] dark:text-slate-400 hover:text-slate-900
     dark:hover:text-white border border-slate-200 dark:border-white/10
     hover:border-slate-400 dark:hover:border-white/25 bg-white dark:bg-transparent" */
.tpl__chip {
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  white-space: nowrap;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  color: #444;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-family: inherit;
  /* The original's chips are <button>s that navigate with JS; these are real
     <a href> links so the gallery filters without JavaScript. That one swap has
     a rendering consequence: the row is a flex container, so every chip is
     stretched to the tallest (34px = the bordered inactive chip). Chrome
     vertically centres a <button>'s content in that stretched box but
     top-aligns an <a>'s, which left the active chip's label 1px high.
     Centring here reproduces the button's box. */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.tpl__chip:hover { color: #0f172a; border-color: #94a3b8; }
.mk-dark .tpl__chip { color: #94a3b8; border-color: rgba(255, 255, 255, 0.1); background: transparent; }
.mk-dark .tpl__chip:hover { color: #fff; border-color: rgba(255, 255, 255, 0.25); }
/* active: "bg-slate-900 dark:bg-white text-white dark:text-slate-900 shadow-sm"
   — note the active chip carries NO border class, so its border-width falls
   back to Preflight's 0. */
.tpl__chip.is-active {
  background: #0f172a;
  color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border: 0 solid #e5e7eb;
}
.tpl__chip.is-active:hover { color: #fff; }
.mk-dark .tpl__chip.is-active { background: #fff; color: #0f172a; }
.mk-dark .tpl__chip.is-active:hover { color: #0f172a; }

/* ═══ Pagination ═══════════════════════════════════════════════════════════ */

/* "px-8 mb-8" (top) and "mt-12" (bottom) */
.tpl__pagination-top { padding-left: 2rem; padding-right: 2rem; margin-bottom: 2rem; }
.tpl__pagination-bottom { margin-top: 3rem; }
/* "flex items-center justify-center gap-1.5" */
.tpl-pager { display: flex; align-items: center; justify-content: center; gap: 0.375rem; }
/* Prev/Next: "px-2.5 py-1 rounded-full text-xs font-medium border
    border-slate-200 dark:border-white/10 text-slate-600 dark:text-slate-400
    hover:text-slate-900 dark:hover:text-white hover:border-slate-400
    dark:hover:border-white/25 disabled:opacity-40 disabled:cursor-default
    disabled:hover:border-slate-200 dark:disabled:hover:border-white/10
    bg-white dark:bg-transparent transition-all" */
.tpl-pager__step {
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  border: 1px solid #e2e8f0;
  color: #475569;
  background: #fff;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
}
.tpl-pager__step:hover { color: #0f172a; border-color: #94a3b8; }
.mk-dark .tpl-pager__step { border-color: rgba(255, 255, 255, 0.1); color: #94a3b8; background: transparent; }
.mk-dark .tpl-pager__step:hover { color: #fff; border-color: rgba(255, 255, 255, 0.25); }
.tpl-pager__step:disabled { opacity: 0.4; cursor: default; }
.tpl-pager__step:disabled:hover { border-color: #e2e8f0; }
.mk-dark .tpl-pager__step:disabled:hover { border-color: rgba(255, 255, 255, 0.1); }
/* Page number: "w-7 h-7 rounded-full text-xs font-semibold transition-all"
   + inactive border/colours, active "bg-slate-900 dark:bg-white text-white
     dark:text-slate-900 shadow-sm" (again no border class when active). */
.tpl-pager__page {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  color: #475569;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-family: inherit;
}
.tpl-pager__page:hover { color: #0f172a; border-color: #94a3b8; }
.mk-dark .tpl-pager__page { color: #94a3b8; border-color: rgba(255, 255, 255, 0.1); background: transparent; }
.mk-dark .tpl-pager__page:hover { color: #fff; border-color: rgba(255, 255, 255, 0.25); }
.tpl-pager__page.is-active {
  background: #0f172a;
  color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border: 0 solid #e5e7eb;
}
.tpl-pager__page.is-active:hover { color: #fff; }
.mk-dark .tpl-pager__page.is-active { background: #fff; color: #0f172a; }
.mk-dark .tpl-pager__page.is-active:hover { color: #0f172a; }

/* ═══ Grid ═════════════════════════════════════════════════════════════════ */

/* "flex-1 px-8 pb-16 max-w-7xl mx-auto w-full" */
.tpl__body {
  flex: 1 1 0%;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 4rem;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
/* "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" */
.tpl__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
}
@media (min-width: 768px) { .tpl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tpl__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Empty state: "text-center py-20 text-slate-500" */
.tpl__empty { text-align: center; padding-top: 5rem; padding-bottom: 5rem; color: #64748b; }
/* "text-sm mb-3" */
.tpl__empty p { font-size: 0.875rem; line-height: 1.25rem; margin-bottom: 0.75rem; }
/* "text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700" */
.tpl__empty button {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #2563eb;
  background: none;
  border: none;
  font-family: inherit;
}
.tpl__empty button:hover { color: #1d4ed8; }
.mk-dark .tpl__empty button { color: #60a5fa; }

/* ═══ Card ═════════════════════════════════════════════════════════════════ */

/* "group text-left rounded-2xl border transition-all duration-200
    overflow-hidden" + background var(--mk-tile).
   The hovered branch replaces the border/shadow wholesale in the original, so
   the non-hovered branch's own hover: classes can never apply. Reproduced as a
   plain :hover here — same rendering. `dark:border-white/8` generates no rule
   (§5.1), so the resting border stays slate-200 in dark mode. */
.tpl-card {
  text-align: left;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  background: var(--mk-tile);
  /* Same <button> vs <a> consequence as .tpl__chip, one level up. Grid items
     stretch to the tallest card in the row, so a card with a one-line title has
     spare height. Chrome centres a <button>'s content in that spare space and
     top-aligns an <a>'s, which put the short cards' thumbnails ~9.8px high.
     A centred column reproduces the button's box; with no spare height (the
     tallest card in each row) it is a no-op. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 0;
  font-family: inherit;
}
.tpl-card:hover {
  border-color: rgba(59, 130, 246, 0.6);
  box-shadow: 0 0 40px rgba(37, 99, 235, 0.15);
  background: var(--mk-inset);
}

/* Thumb: "relative w-full overflow-hidden rounded-lg" + aspectRatio and #fff */
.tpl-card__thumbwrap { padding: 0.75rem 0.75rem 0; }
.tpl-thumb {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 0.5rem;
  aspect-ratio: 1440 / 1400;
  background: #fff;
}
/* "flex h-full" — the slide track. */
.tpl-thumb__track {
  display: flex;
  height: 100%;
  transform: translateX(0);
  transition: transform 500ms ease;
}
.tpl-thumb__track.is-instant { transition: none; }
/* "w-full h-full shrink-0 object-contain object-top" */
.tpl-thumb__track img {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  object-fit: contain;
  object-position: top;
}
/* No screenshots generated for this template yet.
   "w-full h-full flex items-center justify-center bg-slate-100
    dark:bg-slate-900 text-slate-500 dark:text-slate-600 text-xs" */
.tpl-thumb__missing {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.75rem;
  line-height: 1rem;
}
.mk-dark .tpl-thumb__missing { background: #0f172a; color: #475569; }
/* "absolute inset-0 rounded-lg transition-all duration-200 pointer-events-none"
   + ring — resolved by hand (see the note at the top of this file). */
.tpl-thumb__ring {
  position: absolute;
  inset: 0;
  border-radius: 0.5rem;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  box-shadow: 0 0 0 1px #e2e8f0;
}
.mk-dark .tpl-thumb__ring { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }
.tpl-card:hover .tpl-thumb__ring { box-shadow: 0 0 0 2px #3b82f6; }
.mk-dark .tpl-card:hover .tpl-thumb__ring { box-shadow: 0 0 0 2px #3b82f6; }

/* "p-4" */
.tpl-card__body { padding: 1rem; }
/* "flex items-center gap-2 mb-2" */
.tpl-card__badges { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
/* "inline-flex items-center gap-1.5 text-xs px-2 py-0.5 rounded-full font-medium" */
.tpl-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-weight: 500;
}
/* "w-1.5 h-1.5 rounded-full" */
.tpl-badge__dot { width: 0.375rem; height: 0.375rem; border-radius: 9999px; }
/* clean-minimal */
.tpl-badge--clean-minimal { background: rgba(226, 232, 240, 0.7); color: #334155; }
.tpl-badge--clean-minimal .tpl-badge__dot { background: #64748b; }
.mk-dark .tpl-badge--clean-minimal { background: rgba(51, 65, 85, 0.6); color: #cbd5e1; }
.mk-dark .tpl-badge--clean-minimal .tpl-badge__dot { background: #94a3b8; }
/* bold */
.tpl-badge--bold { background: #f3e8ff; color: #7e22ce; }
.tpl-badge--bold .tpl-badge__dot { background: #a855f7; }
.mk-dark .tpl-badge--bold { background: rgba(88, 28, 135, 0.4); color: #d8b4fe; }
.mk-dark .tpl-badge--bold .tpl-badge__dot { background: #c084fc; }
/* technical-dark */
.tpl-badge--technical-dark { background: #e0f2fe; color: #0369a1; }
.tpl-badge--technical-dark .tpl-badge__dot { background: #0ea5e9; }
.mk-dark .tpl-badge--technical-dark { background: rgba(12, 74, 110, 0.4); color: #7dd3fc; }
.mk-dark .tpl-badge--technical-dark .tpl-badge__dot { background: #38bdf8; }
/* Featured: "inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full
    font-medium bg-amber-100 dark:bg-amber-900/40 text-amber-700
    dark:text-amber-300" — gap-1, not gap-1.5. */
.tpl-badge--featured {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-weight: 500;
  background: #fef3c7;
  color: #b45309;
}
.mk-dark .tpl-badge--featured { background: rgba(120, 53, 15, 0.4); color: #fcd34d; }

/* "text-slate-900 dark:text-white font-semibold text-base leading-tight" */
.tpl-card__name { color: #0f172a; font-weight: 600; font-size: 1rem; line-height: 1.25; }
.mk-dark .tpl-card__name { color: #fff; }
/* "text-[#444444] dark:text-slate-500 text-xs mt-1 leading-relaxed" */
.tpl-card__desc { color: #444; font-size: 0.75rem; margin-top: 0.25rem; line-height: 1.625; }
.mk-dark .tpl-card__desc { color: #64748b; }
/* "mt-4 text-xs font-semibold transition-all duration-200" + colour by hover */
.tpl-card__cta {
  margin-top: 1rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  color: #64748b;
}
.mk-dark .tpl-card__cta { color: #475569; }
.tpl-card:hover .tpl-card__cta { color: #2563eb; }
.mk-dark .tpl-card:hover .tpl-card__cta { color: #60a5fa; }