/* Templates (pages/templates.js): the mock's cards, three to a row, each with its kind as a tag */
.templates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.page h2.templates-label { margin: 22px 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); flex-wrap: wrap; }
.page h2.templates-label:first-of-type { margin-top: 0; }
.page h2.templates-label small { font-size: 12.5px; letter-spacing: 0; text-transform: none; }
.templates-card { display: grid; gap: 2px; justify-items: start; padding: 14px 16px; background: var(--raise); border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.templates-card b { font-weight: 700; color: var(--head); }
.templates-card small { color: var(--text3); font-size: 13px; }
.templates-none { background: transparent; border-style: dashed; } .templates-none b { color: var(--text2); }
.templates-kind { margin-top: 8px; font-size: 12px; font-weight: 700; line-height: 20px; padding: 0 8px; border-radius: 6px; }
.templates-kind.blue { color: var(--wait); background: var(--wait-bg); }
.templates-kind.violet { --tc: #6d4fd8; color: var(--tc); background: color-mix(in srgb, var(--tc) 12%, transparent); }
:root[data-theme="dark"] .templates-kind.violet { --tc: #9a7bf0; background: rgba(154,123,240,.14); }
.templates-kind.grey { color: var(--text3); background: var(--chip); }