/* PixelCraft — Prompt template library (W3 / backlog B7, v1; F1 seller
   templates in P1 §4: type filter row, type/blurb on cards, free note,
   same-niche suggestions).
   New file only, loaded after assets/pc.css (see AGENT_SUMMARY.md).
   All colours come from pc.css variables, so dark and light themes work
   without duplicating them here. Class prefix is ptpl- on purpose: pc.css
   already uses tpl-* for a different popover picker, and these styles must
   not restyle it. The library is a chip strip + card grid inside an
   existing composer; it is not a new routed section. */

.ptpl-lib { margin-top: 18px; min-width: 0; }
.ptpl-head h3 { font-size: 15px; letter-spacing: -.01em; }
.ptpl-hint { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 4px; }

.ptpl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.ptpl-chip {
  height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-2); background: transparent; cursor: pointer;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ptpl-chip:hover { border-color: var(--line-2); color: var(--text); }
.ptpl-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }

/* F1 second filter row (template type). Same chips, tighter top margin
   so the two rows read as one filter block, not two sections. */
.ptpl-type-chips { margin-top: -4px; }
.ptpl-free { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0 0 12px; }

.ptpl-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.ptpl-suggest:empty { display: none; }
.ptpl-suggest-label { font-size: 12.5px; font-weight: 600; color: var(--text); }
.ptpl-sug {
  height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-2); background: transparent; cursor: pointer;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ptpl-sug:hover { border-color: var(--accent); color: var(--text); }
.ptpl-empty { font-size: 13px; color: var(--muted); padding: 12px 0; }

.ptpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.ptpl-card {
  text-align: left; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--text); cursor: pointer;
}
.ptpl-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.ptpl-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.ptpl-meta { font-size: 11.5px; color: var(--muted); }
/* F1 card fields: a small type pill and the one-sentence "what this
   makes". Old cards have neither element and keep their old layout. */
.ptpl-type {
  align-self: flex-start; padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; color: var(--accent-text); background: var(--accent-soft);
}
.ptpl-blurb { font-size: 12.5px; line-height: 1.45; color: var(--text); }
.ptpl-prompt {
  font-size: 12.5px; line-height: 1.5; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ptpl-tip { font-size: 12px; line-height: 1.45; color: var(--text-2); }
.ptpl-use { margin-top: auto; padding-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--accent-text); }

@media (max-width: 720px) {
  .ptpl-grid { grid-template-columns: 1fr; }
}