/*
 * Template-level layout: how components sit together on each page type.
 * One section per template; components themselves live in components.css.
 */
@layer templates {

	/* ---------- Pond hero (home, directory, archives, search, 404) ---------- */
	.gp-hero { position: relative; z-index: var(--gp-z-hero); display: flex; align-items: center; justify-content: center; padding: var(--gp-textarea-height) var(--gp-s4) var(--gp-hero-padding-bottom); border-bottom: 1px solid var(--gp-line-2); }
	.gp-hero--full { min-height: var(--gp-hero-full-height); padding-bottom: var(--gp-hero-full-padding-bottom); border-bottom: 0; }
	.gp-hero--mid { min-height: var(--gp-hero-mid-height); }
	.gp-hero--mid .gp-halo { --halo-h: var(--gp-halo-mid-height); }
	.gp-hero__inner { position: relative; z-index: var(--gp-z-content); width: 100%; max-width: var(--gp-measure-search); display: flex; flex-direction: column; align-items: center; gap: var(--gp-space-card); text-align: center; }
	.gp-hero__title { font-size: var(--gp-heading-display); line-height: var(--gp-lh-display); letter-spacing: var(--gp-track-tight); color: var(--gp-ink-hero); }
	.gp-hero--mid .gp-hero__title { font-size: var(--gp-fs-h1); }
	.gp-hero__media .gp-hero__avatar { display: block; width: var(--gp-author-photo-size); height: var(--gp-author-photo-size); border-radius: var(--gp-r-pill); object-fit: cover; box-shadow: var(--gp-shadow-header); }
	.gp-hero__sub { margin-top: var(--gp-offset-tight); font-family: var(--gp-mono); font-size: var(--gp-fs-small); color: var(--gp-muted); }
	.gp-hero__lede { max-width: var(--gp-hero-lede-measure); color: var(--gp-muted); font-size: var(--gp-fs-copy); }
	.gp-hero__foot { font-family: var(--gp-mono); font-size: var(--gp-fs-small); color: var(--gp-soft); }
	.gp-hero__foot a { color: var(--gp-ink-2); }

	/* The pond clips itself; the hero does not, so search suggestions can hang below it. */

	@media (max-width: 45rem) {
		.gp-hero--full { min-height: var(--gp-hero-mobile-min-height); padding-top: var(--gp-hero-mobile-padding-top); padding-bottom: var(--gp-s12); }
		.gp-hero__inner { gap: var(--gp-s4); }
		.gp-hero--full .gp-hero__inner { gap: var(--gp-s6); }
		.gp-hero--full .gp-halo { --halo-h: var(--gp-halo-mobile-height); }
	}

	/* ---------- Search results ---------- */
	.gp-results { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--gp-space-inline); }
	.gp-result { display: grid; grid-template-columns: var(--gp-result-cover-column) minmax(0, 1fr); gap: var(--gp-s4); align-items: center; padding: var(--gp-space-inline); background: var(--gp-surface); border: 1px solid var(--gp-line); border-radius: var(--gp-card-radius); color: var(--gp-ink); text-decoration: none; transition: border-color var(--gp-fast); }
	.gp-result:hover { border-color: var(--gp-line-card-hover); }

	.gp-result__body { display: flex; flex-direction: column; gap: var(--gp-space-hair); min-width: 0; }
	.gp-result__type { display: inline-flex; align-items: center; gap: var(--gp-space-detail); font-family: var(--gp-mono); font-size: var(--gp-fs-small); color: var(--gp-soft); }
	.gp-result__title { font-weight: 500; font-size: var(--gp-fs-base); line-height: var(--gp-lh-title); }
	.gp-result__text { font-size: var(--gp-fs-md); color: var(--gp-muted); line-height: var(--gp-lh-compact); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	@media (max-width: 38.75rem) { .gp-result { grid-template-columns: var(--gp-cover-menu-height) minmax(0, 1fr); } }

	/* ---------- Article ---------- */
	.gp-article { padding-bottom: var(--gp-s4); }
	.gp-article__cover { --cover-h: var(--gp-cover-article-height); --cover-radius: var(--gp-r-2xl); }
	.gp-article__head { margin-top: var(--gp-s8); }
	.gp-article__title { font-size: var(--gp-fs-h1); line-height: var(--gp-lh-page-title); letter-spacing: var(--gp-track-tight); }

	.gp-article__disc { margin-top: var(--gp-s4); }
	.gp-article__layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--gp-s10) var(--gp-s12); margin-top: var(--gp-s4); }
	.gp-article__main { flex: 999 1 var(--gp-article-main-basis); min-width: 0; max-width: var(--gp-measure); }
	.gp-rail { flex: 1 1 var(--gp-footer-about-measure); max-width: var(--gp-halo-newsletter-height); align-self: stretch; }

	@media (max-width: 66rem) {
		.gp-rail { position: static; max-width: none; flex-basis: 100%; }

	}
	@media (min-width: 66.0625rem) { .gp-article__jumps--narrow { display: none; } }
	.gp-article__pair { margin-top: var(--gp-s6); }
	.gp-article__jumps { margin-top: var(--gp-s8); }
	.gp-article__body { margin-top: var(--gp-s8); }
	.gp-article__main > :first-child { margin-top: var(--gp-s4); }
	.gp-article__tags { margin-top: var(--gp-s10); }
	.gp-article__comments { margin-top: var(--gp-s12); max-width: var(--gp-measure); }

	/* ---------- Tool page ---------- */
	.gp-toolpage { padding-bottom: var(--gp-s16); }
	.gp-toolpage__cover { --cover-h: var(--gp-cover-tool-height); --cover-radius: var(--gp-r-2xl); }
	.gp-toolpage__head { margin-top: var(--gp-s8); }
	.gp-toolpage__lede { font-size: var(--gp-fs-lg); line-height: var(--gp-lh-lede); color: var(--gp-ink-copy); max-width: var(--gp-measure-lede); }
	.gp-toolpage__by { font-size: var(--gp-fs-sm); color: var(--gp-soft); }
	.gp-toolpage__sec { margin-top: var(--gp-s16); }
	.gp-toolpage__sec > h2 { font-size: var(--gp-heading-section); margin-bottom: var(--gp-s5); }

	.gp-toolpage__checked { font-size: var(--gp-fs-sm); color: var(--gp-soft); margin-bottom: var(--gp-s5); }
	.gp-toolpage__big { font-size: var(--gp-fs-stat); font-weight: 300; letter-spacing: var(--gp-track-display); line-height: var(--gp-lh-stat); }
	.gp-toolpage__subhead { margin: var(--gp-s8) 0 var(--gp-s4); font-size: var(--gp-fs-lg); font-weight: 500; letter-spacing: 0; }
	/* Tool pages read at body size: bullets, card text and the chips under Platforms, Languages and Tags. */

	.gp-toolpage__vshead { margin-top: var(--gp-s12); }
	.gp-toolpage__meta { margin-top: var(--gp-s16); max-width: var(--gp-measure); }
	.gp-glance__title { font-size: var(--gp-fs-copy); font-weight: 500; letter-spacing: 0; }
	.gp-glance__list { display: flex; flex-direction: column; }
	.gp-glance__list > div { display: flex; justify-content: space-between; gap: var(--gp-s3); padding: var(--gp-space-inline) 0; border-top: 1px solid var(--gp-line-soft); font-size: var(--gp-fs-md); }
	.gp-glance__list dt { color: var(--gp-soft); }
	.gp-glance__list dd { margin: 0; font-weight: 500; text-align: right; }

	/* ---------- Directory and category ---------- */
	/* One swipeable row of categories, then one toolbar: count left, filters and sort right. */
	.gp-dir__bar { margin: var(--gp-s4) 0 var(--gp-s8); display: flex; flex-direction: column; gap: var(--gp-s4); }

	.gp-dir__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gp-s3) var(--gp-s4); padding-top: var(--gp-s4); border-top: 1px solid var(--gp-line); }
	.gp-dir__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gp-space-tight); }
	.gp-dir__sort { display: inline-flex; align-items: center; gap: var(--gp-s2); margin-left: var(--gp-s2); font-size: var(--gp-fs-sm); color: var(--gp-soft); }
	.gp-dir__sort select { min-height: var(--gp-control-height); padding: 0 var(--gp-space-inline); border: 1px solid var(--gp-pill-border); border-radius: var(--gp-control-radius); background: var(--gp-surface); font-size: var(--gp-fs-sm); color: var(--gp-ink); }
	.gp-dir__count { margin: 0; font-family: var(--gp-mono); font-size: var(--gp-fs-xs); letter-spacing: var(--gp-track-eyebrow); text-transform: uppercase; color: var(--gp-soft); }

	/* ---------- Hero actions ---------- */
	.gp-hero__actions { justify-content: center; margin-top: var(--gp-space-hair); }

	/* ---------- Vendors ---------- */
	.gp-vend__inc { display: flex; flex-wrap: wrap; gap: var(--gp-s4); align-items: flex-start; }

	.gp-vend__example { --tile-width: 100%; flex: 1 1 var(--gp-split-side-basis); max-width: var(--gp-vendor-example-width); display: flex; flex-direction: column; gap: var(--gp-s3); align-items: flex-start; }

	.gp-vend__note { margin-top: var(--gp-s3); }
	.gp-vend__compare { margin-top: var(--gp-s6); }
	.gp-vend__compare tbody th { font-weight: 500; color: var(--gp-ink); }
	.gp-vend__compare td, .gp-vend__compare thead th:not(:first-child) { text-align: center; }
	.gp-yes { color: var(--gp-good-ink); font-weight: 700; }
	.gp-no { color: var(--gp-ink-unavailable); }

	/* ---------- Categories page ---------- */
	.gp-catspage { padding-bottom: var(--gp-section); }

	.gp-cats__dot { width: var(--gp-space-standard); height: var(--gp-space-standard); }

	/* ---------- Compare ---------- */
	.gp-picker { max-width: var(--picker-width, var(--gp-picker-width)); padding: var(--gp-space-inline); }
	.gp-picker__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gp-space-small); }
	.gp-picker__box { position: relative; flex: 1 1 var(--gp-menu-min-width); min-width: 0; }

	.gp-picker__vs { flex: none; width: var(--gp-space-major); height: var(--gp-space-major); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--gp-ink); color: var(--gp-white); font-family: var(--gp-mono); font-size: var(--gp-fs-small); }
	.gp-picker { --suggest-offset: var(--gp-space-tight); }

	.gp-cmp__panels { margin-top: var(--gp-s3); }

	.gp-cmp__related { margin-bottom: var(--gp-s12); }
	.gp-cmp__againh { font-size: var(--gp-heading-section); margin-bottom: var(--gp-s5); }

	.gp-cmp__tablehead { margin-top: var(--gp-s12); }

	/* ---------- Alternatives ---------- */
	.gp-alts { margin: var(--gp-s4) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--gp-space-inline); }
	.gp-alt { display: grid; grid-template-columns: var(--gp-s8) var(--gp-alternative-cover-column) minmax(0, 1fr) auto; gap: var(--gp-s4); align-items: center; padding: var(--gp-space-standard); background: var(--gp-surface); border: 1px solid var(--gp-line); border-radius: var(--gp-card-radius); }
	.gp-alt--spon { border: var(--gp-border-dashed-width) dashed var(--gp-gold-line); background: var(--gp-gold-wash); }
	.gp-alt__n { font-family: var(--gp-mono); font-size: var(--gp-fs-sm); color: var(--gp-soft); text-align: center; }

	.gp-alt__body { display: flex; flex-direction: column; gap: var(--gp-space-hair); min-width: 0; }
	.gp-alt__name { font-size: var(--gp-fs-name); font-weight: 500; letter-spacing: var(--gp-track-heading); }
	.gp-alt__name a { color: var(--gp-ink); text-decoration: none; }
	.gp-alt__meta { font-size: var(--gp-fs-sm); color: var(--gp-soft); }
	.gp-alt__text { font-size: var(--gp-fs-md); color: var(--gp-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.gp-alt__act { width: var(--gp-alternative-action-column); display: flex; flex-direction: column; align-items: stretch; gap: var(--gp-space-tight); }
	.gp-alt__try { display: block; width: 100%; min-width: 0; padding: 0 var(--gp-space-standard); font-size: var(--gp-fs-md); line-height: var(--gp-control-height); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.gp-alt__compare { min-height: var(--gp-control-height); display: inline-flex; align-items: center; justify-content: center; font-size: var(--gp-fs-sm); color: var(--gp-muted); text-decoration: underline; text-underline-offset: var(--gp-space-hair); }
	.gp-alt__compare:hover { color: var(--gp-ink); }
	.gp-alt--ext { grid-template-columns: minmax(0, 1fr) var(--gp-alternative-action-column); }
	@media (max-width: 45rem) {
		.gp-alt { grid-template-columns: var(--gp-s6) var(--gp-cover-menu-height) minmax(0, 1fr); }
		.gp-alt__act { grid-column: 1 / -1; width: auto; }
	}

	/* ---------- Submit ---------- */
	.gp-submit__h { font-size: var(--gp-heading-panel); font-weight: 500; letter-spacing: var(--gp-track-heading); margin-bottom: var(--gp-s3); }

	/* ---------- Plain page ---------- */
	.gp-page { padding-bottom: var(--gp-s16); }
	.gp-page__head { padding: var(--gp-s12) 0 var(--gp-s8); max-width: var(--gp-measure); }
	.gp-page__title { font-size: var(--gp-fs-h1); line-height: var(--gp-lh-page-title); letter-spacing: var(--gp-track-tight); }
	.gp-page__lede { margin-top: var(--gp-s4); font-size: var(--gp-fs-lg); color: var(--gp-muted); }
}

@layer templates { .gp-hero__foot a { display: inline-flex; align-items: center; min-width: var(--gp-control-height); min-height: var(--gp-control-height); } }


@layer templates { .gp-page__title--comparison { margin-top: var(--gp-s4); } }

@layer templates { .gp-section--flush { padding-top: 0; } }

@layer templates { .gp-grid--vendor { flex: 999 1 var(--gp-vendor-grid-basis); min-width: 0; } }

@layer templates { .gp-cmp__chooser { --picker-width: var(--gp-measure-search); } }