/* CYP directory front end. Colours come from the theme when it sets these variables. */
.cyp {
	--cyp-ink: var(--wp--preset--color--ink, #1f2a37);
	--cyp-muted: var(--wp--preset--color--muted, #5b6573);
	--cyp-accent: var(--wp--preset--color--accent, #1d5c63);
	--cyp-warm: var(--wp--preset--color--warm, #e8a33d);
	--cyp-surface: var(--wp--preset--color--surface, #ffffff);
	--cyp-line: var(--wp--preset--color--line, #e4ddd2);
	--cyp-tint: var(--wp--preset--color--tint, #f4efe6);
	--cyp-radius: 12px;
	color: var(--cyp-ink);
	font-size: 1rem;
	line-height: 1.55;
}
.cyp *, .cyp *::before, .cyp *::after { box-sizing: border-box; }
.cyp-h { font-size: 1.35rem; margin: 2rem 0 1rem; line-height: 1.25; }
.cyp-h .cyp-label { vertical-align: middle; }
.cyp-meta, .cyp-help, .cyp-card-church { color: var(--cyp-muted); font-size: .92rem; }
.cyp-help { display: block; margin-top: .25rem; }
.cyp-req { font-size: 1.1rem; }
.cyp-label { display: inline-block; font-size: .75rem; font-weight: 600; letter-spacing: .02em; padding: .15rem .5rem; border-radius: 999px; background: var(--cyp-tint); color: var(--cyp-muted); }
.cyp-notice { padding: .8rem 1rem; border-radius: var(--cyp-radius); background: var(--cyp-tint); border-left: 4px solid var(--cyp-accent); margin: 0 0 1.25rem; }
.cyp-disclaimer { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--cyp-line); color: var(--cyp-muted); font-size: .85rem; }
.cyp-empty { color: var(--cyp-muted); font-style: italic; }

/* Buttons */
.cyp-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1.05rem; border-radius: 999px; border: 1.5px solid var(--cyp-accent); background: var(--cyp-accent); color: #fff; font-weight: 600; font-size: .95rem; text-decoration: none; cursor: pointer; line-height: 1.2; }
.cyp-btn:hover, .cyp-btn:focus-visible { filter: brightness(1.08); color: #fff; }
.cyp-btn:focus-visible { outline: 3px solid var(--cyp-warm); outline-offset: 2px; }
.cyp-btn-quiet { background: transparent; color: var(--cyp-accent); }
.cyp-btn-quiet:hover, .cyp-btn-quiet:focus-visible { background: var(--cyp-tint); color: var(--cyp-accent); filter: none; }
.cyp-btn-small { padding: .35rem .75rem; font-size: .85rem; }

/* Filters */
.cyp-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.cyp-filters input[type=search] { flex: 1 1 16rem; }
.cyp-filters select { flex: 0 1 14rem; }
.cyp input[type=text], .cyp input[type=email], .cyp input[type=tel], .cyp input[type=url], .cyp input[type=password], .cyp input[type=number], .cyp input[type=search], .cyp input:not([type]), .cyp select, .cyp textarea {
	width: 100%; padding: .6rem .75rem; border: 1px solid var(--cyp-line); border-radius: 8px; background: var(--cyp-surface); color: var(--cyp-ink); font: inherit;
}
.cyp-filters input, .cyp-filters select { width: auto; }
.cyp input:focus, .cyp select:focus, .cyp textarea:focus { outline: 2px solid var(--cyp-accent); outline-offset: 1px; }

/* Cards */
.cyp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.cyp-card { display: flex; gap: .9rem; padding: 1.1rem; border: 1px solid var(--cyp-line); border-radius: var(--cyp-radius); background: var(--cyp-surface); }
.cyp-tier-featured { border-color: var(--cyp-warm); box-shadow: inset 4px 0 0 var(--cyp-warm); }
.cyp-card-logo { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; flex: none; background: #fff; }
.cyp-card-body { min-width: 0; }
.cyp-card-cat { margin: 0; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--cyp-accent); }
.cyp-card-name { margin: .15rem 0 .35rem; font-size: 1.1rem; line-height: 1.3; }
.cyp-card-name a { color: inherit; text-decoration: none; }
.cyp-card-name a:hover { text-decoration: underline; }
.cyp-card-short { margin: 0 0 .6rem; font-size: .95rem; }
.cyp-card-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .5rem; }
.cyp-card-church { margin: 0; }
.cyp-spotlight { margin-bottom: 1rem; }
.cyp-more { margin-top: 1.5rem; }

/* Church + listing pages */
.cyp-church-head, .cyp-listing-head { display: flex; gap: 1.25rem; align-items: flex-start; margin-bottom: 1.5rem; }
.cyp-church-logo, .cyp-listing-logo { width: 96px; height: 96px; object-fit: contain; border-radius: var(--cyp-radius); background: #fff; border: 1px solid var(--cyp-line); flex: none; }
.cyp-church-welcome { font-size: 1.1rem; margin-top: 0; }
.cyp-special { padding: .8rem 1rem; background: color-mix(in srgb, var(--cyp-warm) 18%, transparent); border-radius: var(--cyp-radius); }
.cyp-services { width: 100%; border-collapse: collapse; }
.cyp-services td { padding: .55rem 0; border-bottom: 1px solid var(--cyp-line); }
.cyp-services td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
.cyp-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .5rem; margin: 1.5rem 0; }
.cyp-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.cyp-flag { margin-top: 2rem; }
.cyp-flag summary { cursor: pointer; color: var(--cyp-muted); font-size: .9rem; }

/* Sign-in */
.cyp-signin { max-width: 26rem; }
.cyp-signin-buttons { display: grid; gap: .6rem; }
.cyp-btn-provider { justify-content: center; background: var(--cyp-surface); color: var(--cyp-ink); border-color: var(--cyp-line); }
.cyp-btn-provider:hover { background: var(--cyp-tint); color: var(--cyp-ink); }
.cyp-or { display: flex; align-items: center; gap: .75rem; color: var(--cyp-muted); margin: 1.25rem 0; }
.cyp-or::before, .cyp-or::after { content: ""; flex: 1; border-top: 1px solid var(--cyp-line); }
.cyp-email-form { display: grid; gap: .5rem; }
.cyp-email-form .cyp-btn { justify-self: start; }

/* Dashboard */
.cyp-dash-hello { color: var(--cyp-muted); }
.cyp-panel { padding: 1.5rem; margin: 0 0 1.5rem; border: 1px solid var(--cyp-line); border-radius: var(--cyp-radius); background: var(--cyp-surface); }
.cyp-panel > .cyp-h:first-child { margin-top: 0; }
.cyp-panel h3 { margin: 1.75rem 0 .75rem; font-size: 1.05rem; }
.cyp-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.cyp-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--cyp-line); }
.cyp-list form { display: inline-flex; gap: .35rem; margin: 0; }
.cyp-form { margin: 0; }
.cyp-form fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.cyp-form legend { font-weight: 700; margin-bottom: .5rem; }
.cyp-field { margin: 0 0 .9rem; }
.cyp-field label, .cyp-field-label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .3rem; }
.cyp-field input[type=checkbox] { margin-right: .35rem; }
.cyp-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .5rem; }
.cyp-services-edit { margin-bottom: 1rem; }
.cyp-photo-edit { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.cyp-photo-edit label { display: grid; gap: .25rem; font-size: .85rem; }
.cyp-upgrade { margin-top: 1.5rem; padding: 1rem 1.25rem; background: var(--cyp-tint); border-radius: var(--cyp-radius); }
.cyp-upgrade h3 { margin-top: 0; }
.cyp-stats { margin: 1rem 0 1.5rem; padding: 1rem; background: var(--cyp-tint); border-radius: var(--cyp-radius); }
.cyp-stat-row { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: .5rem 0 1rem; }
.cyp-stat-row strong { font-size: 1.5rem; display: block; line-height: 1.1; }
.cyp-up { color: #2f7a43; font-weight: 600; font-size: .85rem; }
.cyp-down { color: #a8452e; font-weight: 600; font-size: .85rem; }
.cyp-spark { display: flex; align-items: flex-end; gap: 6px; height: 52px; }
.cyp-spark span { width: 22px; border-radius: 4px 4px 0 0; background: var(--cyp-accent); opacity: .75; }
.cyp-spark span:last-child { opacity: 1; }
.cyp-connect { display: grid; gap: 1rem; }
.cyp-connect-step { padding: 1rem 1.25rem; border: 1px solid var(--cyp-line); border-radius: var(--cyp-radius); }
.cyp-connect-step h4 { margin: 0 0 .5rem; }
.cyp-connect-step ol { padding-left: 1.2rem; }
.cyp-connect-step ol li { margin-bottom: .4rem; }
.cyp-connect-step form { display: inline-block; }
.cyp-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; }
.cyp-key code { display: inline-block; margin-top: .3rem; padding: .4rem .6rem; background: var(--cyp-tint); border-radius: 6px; word-break: break-all; }
.cyp-qr { margin: .75rem 0 .25rem; }
.cyp-prose ul { padding-left: 1.25rem; }

.cyp-embed-body { margin: 0; padding: 16px; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: transparent; }

@media (max-width: 600px) {
	.cyp-row { grid-template-columns: 1fr; }
	.cyp-church-head, .cyp-listing-head { flex-direction: column; }
	.cyp-panel { padding: 1rem; }
}
.cyp-visit { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 2rem; }

/* Banners */
.cyp-banner { margin: 0 0 1.75rem; border-radius: var(--cyp-radius); overflow: hidden; background: var(--cyp-tint); }
.cyp-banner img { display: block; width: 100%; height: auto !important; aspect-ratio: 16 / 5; object-fit: cover; }
.cyp-has-banner { flex-wrap: wrap; }
.cyp-card-banner { flex: 0 0 calc(100% + 2.2rem); width: calc(100% + 2.2rem); margin: -1.1rem -1.1rem .2rem; aspect-ratio: 16 / 5; object-fit: cover; border-radius: var(--cyp-radius) var(--cyp-radius) 0 0; }
.cyp-banner-thumb { display: block; max-width: 240px; height: auto; border-radius: 8px; margin: .25rem 0 .4rem; }
.cyp-inline { display: inline-flex !important; align-items: center; gap: .3rem; font-weight: 400 !important; margin: 0 0 .4rem; }
@media (max-width: 600px) { .cyp-banner img { aspect-ratio: 16 / 7; } }

/* Manage directory console */
.cyp-tabs { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 1.5rem; border-bottom: 1px solid var(--cyp-line); }
.cyp-tabs a { padding: .6rem 1rem; border-radius: 10px 10px 0 0; color: var(--cyp-muted); font-weight: 600; text-decoration: none; margin-bottom: -1px; border: 1px solid transparent; }
.cyp-tabs a:hover { color: var(--cyp-ink); background: var(--cyp-tint); }
.cyp-tabs a[aria-current="page"] { color: var(--cyp-accent); background: var(--cyp-surface); border-color: var(--cyp-line); border-bottom-color: var(--cyp-surface); }
.cyp-count { display: inline-block; min-width: 1.4em; padding: 0 .35em; border-radius: 999px; background: #a8452e; color: #fff; font-size: .75rem; text-align: center; }
.cyp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; margin: 0 0 1rem; }
.cyp-tile { padding: 1rem 1.1rem; border: 1px solid var(--cyp-line); border-radius: var(--cyp-radius); background: var(--cyp-surface); }
.cyp-tile a { color: inherit; text-decoration: none; display: block; }
.cyp-tile strong { display: block; font-size: 1.8rem; line-height: 1.1; }
.cyp-tile span { color: var(--cyp-muted); font-size: .9rem; }
.cyp-jobs { padding-left: 1.2rem; }
.cyp-row-panel { padding: 0; }
.cyp-row-panel > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: 1rem 1.25rem; cursor: pointer; list-style: none; }
.cyp-row-panel > summary::-webkit-details-marker { display: none; }
.cyp-row-panel > summary::before { content: "▸"; color: var(--cyp-muted); }
.cyp-row-panel[open] > summary::before { content: "▾"; }
.cyp-row-title { font-weight: 700; font-size: 1.05rem; }
.cyp-row-body { padding: 0 1.25rem 1.25rem; border-top: 1px solid var(--cyp-line); }
.cyp-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .5rem 0; }
.cyp-inline-form input, .cyp-inline-form select { width: auto; }
.cyp-list .cyp-inline-form { margin: 0; display: inline-flex; }
.cyp-grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; margin: .5rem 0; }
.cyp-grid-form label { display: grid; gap: .3rem; font-weight: 600; font-size: .9rem; }
.cyp-tier-label-featured { background: color-mix(in srgb, var(--cyp-warm) 25%, transparent); color: #7a4b05; }
.cyp-tier-label-plus { background: color-mix(in srgb, var(--cyp-accent) 15%, transparent); color: var(--cyp-accent); }
.cyp-table { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; font-size: .93rem; }
.cyp-table th, .cyp-table td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--cyp-line); vertical-align: top; }
.cyp-result-ok { color: #2f7a43; font-weight: 600; }
.cyp-result-warning { color: #996800; font-weight: 600; }
.cyp-result-error { color: #a8452e; font-weight: 600; }
.cyp-quote { margin: .5rem 0 1rem; padding: .6rem 1rem; border-left: 3px solid var(--cyp-line); color: var(--cyp-ink); background: var(--cyp-tint); }
.cyp-pager a, .cyp-pager strong { display: inline-block; padding: .2rem .55rem; }
@media (max-width: 600px) { .cyp-table { display: block; overflow-x: auto; } }

/* Warm call-to-action button */
.cyp-btn-warm { background: var(--cyp-warm); border-color: var(--cyp-warm); color: var(--cyp-ink); }
.cyp-btn-warm:hover, .cyp-btn-warm:focus-visible { color: var(--cyp-ink); filter: brightness(1.05); }

/* Contact form */
.cyp-contact { margin-top: 2rem; }
.cyp-choice { border: 0; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.cyp-choice legend { font-weight: 600; font-size: .92rem; margin-bottom: .4rem; width: 100%; }
.cyp-choice label { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .8rem; border: 1px solid var(--cyp-line); border-radius: 999px; cursor: pointer; font-size: .92rem; min-height: 44px; }
.cyp-choice label:has(input:checked) { border-color: var(--cyp-accent); background: color-mix(in srgb, var(--cyp-accent) 10%, transparent); color: var(--cyp-accent); font-weight: 600; }
.cyp-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.cyp-leads summary { cursor: pointer; padding: .6rem 0; }
.cyp-req-list { list-style: none; padding: 0; margin: 0; }
.cyp-req { padding: .8rem 1rem; border: 1px solid var(--cyp-line); border-radius: 10px; margin-bottom: .6rem; }
.cyp-req p { margin: 0 0 .35rem; }
.cyp-req-new { border-left: 4px solid var(--cyp-warm); }
.cyp-req-done { opacity: .7; }
.cyp-req-msg { white-space: normal; }

/* Gallery + lightbox */
.cyp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .5rem; }
.cyp-gallery-item { display: block; border-radius: 10px; overflow: hidden; background: var(--cyp-tint); }
.cyp-gallery-item img { display: block; width: 100%; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .2s; }
.cyp-gallery-item:hover img, .cyp-gallery-item:focus-visible img { transform: scale(1.04); }
.cyp-lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 92vh; overflow: visible; }
.cyp-lightbox::backdrop { background: rgba(10, 14, 20, .85); }
.cyp-lightbox img { display: block; max-width: 92vw; max-height: 86vh; border-radius: 10px; }
.cyp-lightbox button { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 999px; border: 0; background: rgba(255,255,255,.92); color: #1f2a37; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.cyp-lb-prev { left: -8px; } .cyp-lb-next { right: -8px; }
.cyp-lightbox .cyp-lb-close { top: -12px; right: -12px; transform: none; font-size: 1.5rem; }
.cyp-photo-edit label { position: relative; }
.cyp-photo-edit img { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; display: block; }

/* App links with QR codes */
.cyp-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .75rem; }
.cyp-link-card { display: flex; gap: 1rem; align-items: center; padding: 1rem; border: 1px solid var(--cyp-line); border-radius: var(--cyp-radius); background: var(--cyp-surface); }
.cyp-link-card .cyp-qr { flex: none; width: 132px; height: 132px; padding: 6px; background: #fff; border-radius: 8px; box-sizing: content-box; }
.cyp-link-card .cyp-qr img, .cyp-link-card .cyp-qr canvas { width: 132px !important; height: 132px !important; }
.cyp-link-card h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.cyp-link-card p { margin: 0 0 .6rem; color: var(--cyp-muted); font-size: .92rem; }

/* Business-type chips and finder */
.cyp-chips { list-style: none; padding: 0; margin: .5rem 0 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.cyp-chips a { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border: 1px solid var(--cyp-line); border-radius: 999px; background: var(--cyp-surface); color: var(--cyp-ink); text-decoration: none; font-weight: 600; font-size: .92rem; min-height: 40px; }
.cyp-chips a:hover, .cyp-chips a:focus-visible { border-color: var(--cyp-accent); color: var(--cyp-accent); }
.cyp-chips a span { font-weight: 600; font-size: .78rem; color: var(--cyp-muted); background: var(--cyp-tint); border-radius: 999px; padding: 0 .45rem; }
.cyp-find-form { display: flex; flex-wrap: wrap; gap: .5rem; max-width: 48rem; }
.cyp-find-form input[type=search] { flex: 2 1 16rem; padding: .85rem 1.1rem; border-radius: 999px; font-size: 1.05rem; }
.cyp .cyp-find-form select, .cyp .cyp-find-form .cyp-zip-input { flex: 0 1 auto; width: auto; border-radius: 999px; padding: .85rem 1rem; }
.cyp .cyp-find-form .cyp-zip-input { flex: 0 0 8rem; width: 8rem; }
.cyp-find-form .cyp-btn { padding: .85rem 1.6rem; font-size: 1.05rem; }
.cyp-find .cyp-help { margin-top: 1rem; }
.cyp .cyp-filters .cyp-zip-input { width: 7rem; flex: 0 0 7rem; }
.cyp-row-3 { grid-template-columns: 1fr 1.4fr 1.4fr; }
@media (max-width: 600px) { .cyp-row-3 { grid-template-columns: 1fr; } }

/* 0.6.0: add/remove rows, owner bar, service picks, reports */
.cyp .cyp-row-x { grid-template-columns: 1fr 1fr 44px; align-items: center; }
.cyp .cyp-row-3.cyp-row-x { grid-template-columns: 1fr 1.4fr 1.4fr 44px; }
.cyp .cyp-x { width: 44px; height: 44px; border: 1px solid var(--cyp-line); border-radius: 10px; background: transparent; color: var(--cyp-muted); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.cyp .cyp-x:hover, .cyp .cyp-x:focus-visible { color: #a33; border-color: #a33; }
.cyp [data-cyp-rows] template { display: none; }
@media (max-width: 600px) {
	.cyp .cyp-row-x, .cyp .cyp-row-3.cyp-row-x { grid-template-columns: 1fr 44px; }
	.cyp .cyp-row-x > input:not(:first-child) { grid-column: 1; }
	.cyp .cyp-row-x > .cyp-x { grid-column: 2; grid-row: 1; }
	.cyp .cyp-row-x { padding-bottom: .5rem; border-bottom: 1px dashed var(--cyp-line); }
}
.cyp-owner-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; margin: 0 0 1.25rem; border-radius: var(--cyp-radius); background: color-mix(in srgb, var(--cyp-accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--cyp-accent) 35%, transparent); font-size: .93rem; }
.cyp-choice-services label { border-radius: 10px; }
.cyp-req-services { font-weight: 600; font-size: .93rem; }
.cyp-report-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-bottom: 1rem; }
.cyp-report-tools label { display: grid; gap: .25rem; font-size: .9rem; font-weight: 600; }
.cyp-table td.cyp-num, .cyp-table th.cyp-num { text-align: right; font-variant-numeric: tabular-nums; }
.cyp-table tfoot td { font-weight: 700; border-top: 2px solid var(--cyp-line); }
.cyp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin: 0 0 1rem; }
.cyp-kpis div { padding: .75rem 1rem; border: 1px solid var(--cyp-line); border-radius: var(--cyp-radius); }
.cyp-kpis strong { display: block; font-size: 1.6rem; line-height: 1.1; }

/* 0.7.0: ministries, member directory link */
.cyp-members-note { padding: .85rem 1rem; border: 1px dashed var(--cyp-line); border-radius: var(--cyp-radius); color: var(--cyp-muted); }
.cyp-ministry-card { border-left: 4px solid var(--cyp-accent); }
.cyp-ministry-card .cyp-card-logo { width: 56px; height: 56px; object-fit: cover; border-radius: 12px; margin: 1rem 1rem 0; }

/* 0.8.0: church search, employee listings */
.cyp-church-filters .cyp-clear { align-self: center; }
.cyp-employee-line { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
#churches-list { scroll-margin-top: 1.5rem; }

/* 0.9.0: pick images from the church website */
.cyp-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; margin: .75rem 0 1rem; }
.cyp-pick { margin: 0; padding: .5rem; border: 1px solid var(--cyp-line); border-radius: var(--cyp-radius); display: grid; gap: .25rem; font-size: .88rem; }
.cyp-pick img { width: 100%; height: 110px; object-fit: contain; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 16px 16px; border-radius: 6px; }
.cyp-pick figcaption { color: var(--cyp-muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cyp-pick label { display: flex; align-items: center; gap: .35rem; min-height: 32px; cursor: pointer; }
.cyp-pick:has(input:checked) { border-color: var(--cyp-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cyp-accent) 25%, transparent); }