/* Template library: gallery (/templates/), category pages, header band with search + sort + category chips,
   pagination, empty / loading / error states, SEO text + FAQ, editor placeholder (/my/new/).
   Royal Original tokens only (styles/tokens.css) and base.css components (.btn, .chip, .accordion, .notice,
   .skeleton). Book p08, p13-15. Mobile first. No gradients, glow or blur. */

/* ---------------------------------------------------------------------
 * Page frame: full width, content kept inside the 1600px page max by --page-inline.
 * ------------------------------------------------------------------ */
.lib {
	display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr);
	padding: var(--space-5) var(--page-inline) var(--section-padding);
}
.lib--narrow { min-height: 60vh; align-content: center; }
@media (min-width: 768px) { .lib { padding-top: var(--space-6); } }
/* Gallery and category pages: the header band touches the site header. */
.lib:has(> .lib-hero) { padding-top: 0; }

/* Section titles (H2, light 300, book p07) */
.lib-section-title { max-width: var(--measure-heading); }

/* ---------------------------------------------------------------------
 * Header band (owner feedback 2026-10-29; direction = "Explore email templates" in docs/brand/homepage-concept.png):
 * full-bleed tint, centered H1 + one count line, the search bar as the hero element, centered category chips.
 * ------------------------------------------------------------------ */
.lib-hero {
	display: grid; gap: var(--space-5); justify-items: center; min-width: 0;
	margin-inline: calc(-1 * var(--page-inline)); padding: var(--space-5) var(--page-inline) var(--space-6);
	background: var(--color-surface-tint); border-bottom: 1px solid var(--color-info-bg);
	text-align: center;
}
/* The open category menu must sit above the cards below the band (motifs.css makes the band its own stacking context). */
.lib-hero { z-index: 5; }
@media (min-width: 768px) { .lib-hero { gap: var(--space-6); padding-top: var(--space-7); padding-bottom: var(--space-7); } }
/* Category pages: the breadcrumb is centered like the title under it. */
.lib-hero__crumbs ol { justify-content: center; }
@media (min-width: 768px) { .lib-hero__crumbs { margin-top: calc(-1 * var(--space-5)); margin-bottom: calc(-1 * var(--space-3)); } }

.lib-head { display: grid; justify-items: center; gap: var(--space-3); }
/* Deliberate deviation from the book's H1 (300 weight, 64px): the owner reads a huge thin H1 as an error message
   here, so the gallery H1 is smaller and heavier (32px phone to 48px desktop, weight 500, -1px). */
.lib-head h1 {
	max-width: 22ch; font-size: clamp(32px, 1.5rem + 2vw, 48px); font-weight: 500; line-height: 1.1; letter-spacing: -1px;
}
.lib-head__sub { max-width: 60ch; font-size: var(--font-size-lead); line-height: var(--line-height-lead); color: var(--color-text-muted); }

/* ---------------------------------------------------------------------
 * Search form: one joined bar (search | sort | Search button), category chips under it.
 * Layout idea adapted from the 21st.dev "Search Bar with Category Filter" joined control group.
 * ------------------------------------------------------------------ */
.lib-filters { display: grid; gap: var(--space-5); justify-items: center; width: 100%; min-width: 0; }

/* One joined 56px pill at every width: the border lives on .lib-bar; input, sort and Search button sit inside it. */
.lib-bar {
	display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; width: min(100%, 800px); min-width: 0;
	padding: 5px; text-align: left;
	background: var(--color-surface); border: 1px solid var(--color-control-border); border-radius: var(--radius-pill);
}
/* No blue ring on the search bar or Sort (David 2026-10-29): focus shows as a darker grey border only. */
.lib-bar:focus-within { border-color: var(--color-text); }
.lib-search { position: relative; min-width: 0; }
.lib-search__icon { position: absolute; left: 12px; top: 50%; width: 22px; height: 22px; margin-top: -11px; color: var(--color-text-muted); pointer-events: none; }
.lib-search__input {
	display: block; width: 100%; min-height: 44px; padding: 0 44px 0 44px;
	font: inherit; font-size: var(--font-size-body); color: var(--color-text); text-overflow: ellipsis;
	background: transparent; border: 0; border-radius: var(--radius-pill);
	-webkit-appearance: none; appearance: none;
}
.lib-search__input:focus, .lib-search__input:focus-visible { outline: none; box-shadow: none; }
.lib-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.lib-search__clear {
	position: absolute; right: 0; top: 50%; margin-top: -22px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
	color: var(--color-text-muted); background: transparent; border: 0; border-radius: 50%; cursor: pointer;
}
.lib-search__clear[hidden] { display: none; }
.lib-search__clear .icon { width: 20px; height: 20px; }
@media (hover: hover) { .lib-search__clear:hover { color: var(--color-text); background: var(--color-surface-tint); } }
.lib-search__clear:focus-visible { outline-offset: -3px; }

@media (min-width: 768px) { .lib-search__icon { left: 14px; } }
@media (hover: hover) {
	.lib-bar:hover { border-color: var(--color-text); }
	.lib-bar:focus-within:hover { border-color: var(--color-text); }
}

/* Categories below 1024px (owner 2026-10-30): one 48px "Category: All" menu of real links, as wide as the search.
   A native <details>, so it opens with no JS; templates.js only closes it on Escape or an outside click. */
.lib-cats { display: flex; justify-content: center; width: 100%; min-width: 0; }
.lib-catmenu { position: relative; width: min(100%, 800px); text-align: left; }
.lib-catmenu__btn {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
	min-height: 48px; padding: 0 var(--space-4); list-style: none; cursor: pointer;
	background: var(--color-surface); border: 1px solid var(--color-control-border); border-radius: var(--radius-control);
}
.lib-catmenu__btn::-webkit-details-marker { display: none; }
.lib-catmenu__btn strong { font-weight: var(--font-weight-label); }
.lib-catmenu__btn .icon { width: 20px; height: 20px; color: var(--color-text-muted); transition: transform var(--motion-duration-fast) var(--motion-ease); }
.lib-catmenu[open] .lib-catmenu__btn .icon { transform: rotate(180deg); }
.lib-catmenu__list {
	position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); max-height: min(60svh, 420px); overflow-y: auto; overscroll-behavior: contain;
	padding: var(--space-1); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-dropdown); box-shadow: var(--shadow-raised);
}
.lib-catmenu__list a { display: flex; align-items: center; min-height: 48px; padding: 0 var(--space-3); color: var(--color-text); text-decoration: none; border-radius: var(--radius-control); }
@media (hover: hover) { .lib-catmenu__list a:hover { background: var(--color-surface-tint); } }
.lib-catmenu__list a[aria-current] { color: var(--color-primary); font-weight: var(--font-weight-label); background: var(--color-info-bg); }
.lib-cats .lib-cats__list { display: none; }

/* Category chips from 1024px (book p13): 44px pills, selected = primary fill, centered under the search. All categories
   always show (no More / Less, no counts) and wrap onto as many lines as they need, so new categories just fit. */
@media (min-width: 1024px) {
	.lib-catmenu { display: none; }
	.lib-cats .lib-cats__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
	.lib-cats .lib-cats__list a.chip { padding-inline: 13px; }
}
.lib-cats__list li { flex: none; }
.lib-cats a.chip:not(.is-active) { border-color: var(--color-border); }
@media (hover: hover) { .lib-cats a.chip:not(.is-active):hover { border-color: var(--color-text); } }
.lib-cats .chip, .lib-related .chip, .tfill .chip, .lib-empty .chip { white-space: nowrap; }

/* ---------------------------------------------------------------------
 * Results: count, grid 4 / 3 / 2 / 1 (book p08), loading skeleton, error, empty
 * ------------------------------------------------------------------ */
.lib-results { display: grid; gap: var(--space-4); min-width: 0; }
.lib-results__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); min-height: 1.4em; }
.lib-results__count { color: var(--color-text-muted); }
.lib-results__all { font-weight: var(--font-weight-label); }
.tgrid { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(var(--gallery-columns), minmax(0, 1fr)); }

/* Request error: the search stays as it is. */
.lib-error { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); }
.lib-error__text { display: flex; align-items: center; gap: var(--space-2); }
.lib-error__text .icon { width: 20px; height: 20px; flex: none; }

/* Loading: cards turn into static skeleton blocks of the same size (opacity pulse unless reduced motion). */
.lib-results.is-loading .tcard-t { pointer-events: none; }
.lib-results.is-loading .tcard-t__thumb { background: var(--color-disabled-bg); }
.lib-results.is-loading .tcard-t__thumb > * { opacity: 0; }
.lib-results.is-loading .tcard-t__title, .lib-results.is-loading .tcard-t__cat, .lib-results.is-loading .tcard-t__more {
	color: transparent; background: var(--color-disabled-bg); border-radius: var(--radius-control); width: fit-content; max-width: 100%;
}
.lib-results.is-loading .tcard-t__title a { color: transparent; }
.lib-results.is-loading .tcard-t__actions, .lib-results.is-loading .tfill, .lib-results.is-loading .pager, .lib-results.is-loading .wl-btn { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
	.lib-results.is-loading .tcard-t { animation: ete-pulse var(--motion-duration-story) var(--motion-ease) infinite alternate; }
}

/* Empty state (book p15): small envelope outline, clear reason, one next action. */
.lib-empty {
	display: grid; justify-items: center; gap: var(--space-4); text-align: center;
	padding: var(--space-8) var(--space-5); border-radius: var(--radius-panel); background: var(--color-surface-tint);
}
.lib-empty__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-primary); }
.lib-empty__title { font-size: var(--font-size-h3); font-weight: var(--font-weight-h3); line-height: var(--line-height-h3); letter-spacing: var(--letter-spacing-h3); }
.lib-empty p { max-width: 52ch; color: var(--color-text-muted); }
.lib-empty .btn { margin-top: var(--space-2); }
.lib-empty__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); list-style: none; padding: 0; }

/* Closing band under the last row: always its own full row, so it never stretches to a card's height. Hidden while more
   pages follow (templates.js). */
.tfill {
	grid-column: 1 / -1; display: grid; align-content: center; justify-items: start; gap: var(--space-3);
	padding: var(--space-5); border-radius: var(--radius-panel); background: var(--color-surface-tint);
}
.tfill[hidden] { display: none; }
.tfill__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-primary); }
.tfill__title { font-size: var(--font-size-h4); font-weight: var(--font-weight-h4); line-height: var(--line-height-h4); letter-spacing: var(--letter-spacing-h4); max-width: 24ch; }
.tfill__text { color: var(--color-text-muted); max-width: 44ch; }
.tfill__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (min-width: 768px) {
	.tfill { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--space-5); align-items: center; }
	.tfill__icon { grid-row: span 2; }
	.tfill__title { max-width: none; }
	.tfill__chips, .tfill > .btn { grid-column: 3; grid-row: 1 / span 2; justify-self: end; justify-content: flex-end; max-width: 640px; }
}

/* ---------------------------------------------------------------------
 * Pagination (book p13): 44px targets, current page primary, Previous / Next labels,
 * disabled ends use aria-disabled.
 * ------------------------------------------------------------------ */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); padding-top: var(--space-4); }
.pager__item {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: 44px; min-height: 44px; padding: 0 12px;
	font-weight: var(--font-weight-label); color: var(--color-text); text-decoration: none;
	background: var(--color-surface); border: 1px solid var(--color-control-border); border-radius: var(--radius-control);
}
.pager__item .icon { width: 20px; height: 20px; }
@media (hover: hover) { a.pager__item:hover { color: var(--color-text); border-color: var(--color-text); background: var(--color-surface-tint); } }
.pager__item.is-current { color: var(--color-on-primary); background: var(--color-primary); border-color: var(--color-primary); }
.pager__item[aria-disabled="true"] { color: var(--color-disabled-text); background: var(--color-disabled-bg); border-color: var(--color-disabled-bg); cursor: not-allowed; }
.pager__gap { min-width: 24px; text-align: center; color: var(--color-text-muted); }
@media (max-width: 479px) {
	.pager__step { flex: 1 1 calc(50% - 4px); }
	.pager__step:first-child { order: -2; }
	.pager__step:last-child { order: -1; }
}

/* ---------------------------------------------------------------------
 * Related categories (category page), SEO text + FAQ panel
 * ------------------------------------------------------------------ */
.lib-related { display: grid; gap: var(--space-5); margin-top: calc(var(--section-padding) - var(--space-6)); }
.lib-related__list { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.lib-info {
	display: grid; gap: var(--space-7); margin-top: calc(var(--section-padding) - var(--space-6));
	padding: var(--panel-padding); border-radius: var(--radius-panel); background: var(--color-surface-tint);
}
.lib-info__main, .lib-faq { display: grid; gap: var(--space-5); align-content: start; min-width: 0; }
.lib-info__sub { margin-top: var(--space-4); font-size: var(--font-size-h4); font-weight: var(--font-weight-h4); line-height: var(--line-height-h4); letter-spacing: var(--letter-spacing-h4); }
.prose-sm { display: grid; gap: var(--space-4); max-width: var(--measure-body); color: var(--color-text-muted); }
.prose-sm h2, .prose-sm h3 { color: var(--color-text); font-size: var(--font-size-h4); font-weight: var(--font-weight-h4); line-height: var(--line-height-h4); }
.prose-sm ul, .prose-sm ol { padding-left: 1.25em; display: grid; gap: var(--space-2); }
.lib-steps { counter-reset: s; display: grid; gap: var(--space-4); }
.lib-steps li { counter-increment: s; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-4); align-items: start; color: var(--color-text-muted); }
.lib-steps li::before {
	content: counter(s); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
	font-size: 18px; font-weight: var(--font-weight-label); color: var(--color-on-primary); background: var(--color-primary);
}
.lib-steps li > span { padding-top: 8px; }
.lib-steps strong { color: var(--color-text); font-weight: 600; }
.lib-faq .accordion { border-top-color: var(--color-border); }
@media (min-width: 1024px) {
	.lib-info { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); }
}

/* ---------------------------------------------------------------------
 * Editor placeholder (/my/new/)
 * ------------------------------------------------------------------ */
.soon { display: grid; gap: var(--space-7); align-items: center; padding: var(--panel-padding); border-radius: var(--radius-panel); background: var(--color-surface-tint); }
.soon__text { display: grid; gap: var(--space-4); justify-items: start; }
.soon h1 { max-width: var(--measure-heading); }
.soon__lead { max-width: 52ch; font-size: var(--font-size-lead); line-height: var(--line-height-lead); color: var(--color-text-muted); }
.soon__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.soon__back a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; }
.soon__back .icon { width: 20px; height: 20px; }
.soon__art { display: grid; place-items: center; }
.soon__art img { width: auto; max-height: 420px; border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.soon__mark { width: 140px; height: auto; }
@media (min-width: 1024px) { .soon { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }

/* "Create custom template" tile (first grid cell on page 1). Same frame and height as a template card (the grid row
   stretches it). The message sits at the top so it reads at a glance: envelope + plus, title, one line, button.
   Below it a dashed blank-email outline fills the rest of the tile. The whole tile is the link (stretched title). */
.tcard-new {
	display: flex; flex-direction: column; border: 1px dashed var(--color-primary); background: var(--color-surface-tint);
}
.tcard-new__main {
	display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-6) var(--space-5) var(--space-5); text-align: center;
}
.tcard-new__art { position: relative; display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: var(--space-1); border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-primary); }
.tcard-new__env { display: grid; place-items: center; }
.tcard-new__env .icon { width: 34px; height: 34px; }
.tcard-new__plus {
	position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
	background: var(--color-primary); color: var(--color-on-primary); box-shadow: 0 0 0 3px var(--color-surface-tint);
}
.tcard-new__plus .icon { width: 16px; height: 16px; stroke-width: 2.25; }
.tcard-new__title { font-size: 20px; }
.tcard-new__text { color: var(--color-text-muted); max-width: 26ch; }
.tcard-new__btn { margin-top: var(--space-2); pointer-events: none; }
.tcard-new__sketch {
	flex: 1 1 0; min-height: 0; display: grid; align-content: start; gap: 10px; overflow: hidden;
	margin: 0 var(--space-6); padding: var(--space-5) var(--space-5) 0;
	border: 1px dashed var(--color-border); border-bottom: 0; border-radius: var(--radius-control) var(--radius-control) 0 0;
	background: var(--color-surface);
}
.tcard-new__sketch i { height: 10px; border-radius: 5px; background: var(--color-disabled-bg); }
.tcard-new__sketch i:first-child { height: 56px; border-radius: var(--radius-control); }
.tcard-new__sketch i:nth-child(3) { width: 70%; }
.tcard-new__sketch b { width: 40%; height: 22px; margin: 4px 0; border-radius: 11px; background: var(--color-info-bg); }
@media (hover: hover) {
	.tcard-new:hover { background: var(--color-info-bg); }
	.tcard-new:hover .tcard-new__plus { box-shadow: 0 0 0 3px var(--color-info-bg); }
}
.lib-results.is-loading .tcard-new__main > *, .lib-results.is-loading .tcard-new__sketch { opacity: 0; }
/* One column (below 768px): a short row tile, no outline sketch. */
@media (max-width: 767px) {
	.tcard-new { display: grid; grid-template-columns: auto minmax(0, 1fr); }
	.tcard-new__main {
		grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "art title" "art text" "art btn";
		justify-items: start; align-items: center; column-gap: var(--space-4); row-gap: var(--space-1); padding: var(--space-4); text-align: left;
	}
	.tcard-new__art { grid-area: art; align-self: start; width: 56px; height: 56px; margin: 0; }
	.tcard-new__env .icon { width: 28px; height: 28px; }
	.tcard-new__plus { width: 24px; height: 24px; }
	.tcard-new__title { grid-area: title; }
	.tcard-new__text { grid-area: text; max-width: none; }
	.tcard-new__btn { grid-area: btn; margin-top: var(--space-2); }
	.tcard-new__sketch { display: none; }
}

/* The count line is empty on the normal view: no gap above the grid. */
.lib-results__meta:has(> .lib-results__count:empty:only-child) { display: none; }