/**
 * ssf-features-explorer.css — public "Can I…?" Feature Explorer (light theme only).
 *
 * Adapted from docs/prototypes ../_prototypes/can-i-feature-explorer.html with three
 * SimpleSuite changes: (1) LIGHT palette only — no dark @media / data-theme, no theme
 * toggle; (2) theme typography inherited — body/headings use var(--ss-font, inherit),
 * never a hardcoded system-ui stack (only the tiny tag/label chips keep mono);
 * (3) everything namespaced under .ssf-features so it can't leak into the host theme.
 *
 * Squared (no border-radius). Gold accent consumes the suite --ss-accent token with the
 * prototype's light gold as fallback. FE=teal · BE=plum · FE+BE=gold.
 */

.ssf-features {
	/* palette (light only) */
	--fx-paper:#f6f4ef; --fx-card:#fffefb; --fx-ink:#1a1b1f; --fx-ink-soft:#4a4c52;
	--fx-ink-faint:#7c7e86; --fx-line:#e2ddd2; --fx-line-strong:#cfc9ba;
	/* gold accent — prefer the suite token, fall back to the prototype's light gold */
	--fx-gold:var(--ss-accent, #b8901f); --fx-gold-wash:#f3ead2;
	--fx-fe:#1f7f99; --fx-fe-wash:#e3f0f3; --fx-be:#6f4fa8; --fx-be-wash:#ece6f6;
	--fx-fb:#a4791a; --fx-fb-wash:#f3ead2;
	--fx-shadow:0 1px 0 rgba(0,0,0,.03);
	/* typography — inherit the active theme's fonts (never hardcode a family) */
	--fx-mono:var(--ss-font-mono, ui-monospace,"SF Mono",Menlo,Consolas,monospace);
	--fx-sans:var(--ss-font, inherit);

	/* full-bleed background band — spans the viewport; inner content capped at 1250px.
	   The margin-inline/padding-inline calc trick keeps the band edge-to-edge WITHOUT a
	   100vw element (so no horizontal scrollbar overflow). */
	margin-inline:calc(50% - 50vw);
	padding-inline:max(clamp(16px,4vw,40px), calc(50% - 625px));
	padding-block:clamp(32px,5vw,64px);
	background:var(--fx-paper); color:var(--fx-ink);
	font-family:var(--fx-sans); line-height:1.5; -webkit-font-smoothing:antialiased;
}
.ssf-features, .ssf-features *{box-sizing:border-box}

/* ---- masthead ---- */
.ssf-features .ssf-fx-mast{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
	border-bottom:1px solid var(--fx-line);padding-bottom:18px;margin-bottom:clamp(24px,5vw,48px)}
.ssf-features .ssf-fx-brand{font-family:var(--fx-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
	color:var(--fx-ink-faint)}
.ssf-features .ssf-fx-brand b{color:var(--fx-gold);font-weight:700}

/* ---- hero search ---- */
.ssf-features .ssf-fx-hero{margin-bottom:34px}
.ssf-features .ssf-fx-hero h1{font-family:var(--fx-sans);font-size:clamp(28px,5.5vw,50px);line-height:1.02;
	letter-spacing:-.02em;font-weight:700;margin:0 0 8px;text-wrap:balance}
.ssf-features .ssf-fx-hero h1 em{font-style:normal;color:var(--fx-gold)}
.ssf-features .ssf-fx-hero p{margin:0 0 22px;max-width:60ch;color:var(--fx-ink-soft);font-size:clamp(15px,1.6vw,17px)}
.ssf-features .ssf-fx-searchbar{display:flex;align-items:stretch;border:1px solid var(--fx-line-strong);
	background:var(--fx-card);box-shadow:var(--fx-shadow)}
.ssf-features .ssf-fx-searchbar:focus-within{border-color:var(--fx-gold);box-shadow:0 0 0 3px var(--fx-gold-wash)}
.ssf-features .ssf-fx-prompt{font-family:var(--fx-mono);font-weight:700;font-size:clamp(16px,2.4vw,22px);
	display:flex;align-items:center;padding:0 6px 0 clamp(14px,2vw,20px);
	color:var(--fx-gold);white-space:nowrap;user-select:none}
.ssf-features #ssf-fx-q{flex:1;border:0;background:none;color:var(--fx-ink);font-size:clamp(16px,2.4vw,22px);
	font-family:var(--fx-sans);padding:clamp(14px,2vw,18px) 8px;outline:none;min-width:0;margin:0}
.ssf-features #ssf-fx-q::placeholder{color:var(--fx-ink-faint)}
.ssf-features .ssf-fx-clear{border:0;background:none;color:var(--fx-ink-faint);font-size:22px;cursor:pointer;
	padding:0 16px;display:none;line-height:1}
.ssf-features .ssf-fx-clear:hover{color:var(--fx-ink)}
.ssf-features .ssf-fx-searchbar.has-q .ssf-fx-clear{display:block}
.ssf-features .ssf-fx-suggests{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;align-items:center}
.ssf-features .ssf-fx-lbl{font-family:var(--fx-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
	color:var(--fx-ink-faint);margin-right:2px}
.ssf-features .ssf-fx-seed{font-family:var(--fx-mono);font-size:12px;background:none;
	border:1px dashed var(--fx-line-strong);color:var(--fx-ink-soft);padding:5px 10px;cursor:pointer}
.ssf-features .ssf-fx-seed:hover{border-style:solid;border-color:var(--fx-gold);color:var(--fx-ink)}

/* ---- Quick find toggle (collapses the filter panel) ---- */
.ssf-features .ssf-fx-qfbar{margin-top:14px}
.ssf-features .ssf-fx-qf{display:inline-flex;align-items:center;gap:8px;font-family:var(--fx-mono);
	font-size:12px;letter-spacing:.06em;text-transform:uppercase;background:var(--fx-card);
	border:1px solid var(--fx-line-strong);color:var(--fx-ink-soft);padding:7px 13px;cursor:pointer}
.ssf-features .ssf-fx-qf:hover{border-color:var(--fx-gold);color:var(--fx-ink)}
.ssf-features .ssf-fx-qf[aria-expanded="true"]{border-color:var(--fx-gold);color:var(--fx-ink)}
.ssf-features .ssf-fx-qf.has-active{border-color:var(--fx-gold);color:var(--fx-ink)}
.ssf-features .ssf-fx-qf-ic{width:15px;height:15px;flex-shrink:0}
.ssf-features .ssf-fx-qf-badge{display:inline-flex;align-items:center;justify-content:center;min-width:17px;
	height:17px;padding:0 4px;background:var(--fx-gold);color:#241c05;font-size:10.5px;font-weight:700;
	line-height:1}
.ssf-features .ssf-fx-qf-badge[hidden]{display:none}

/* ---- filters (collapsible panel) ---- */
.ssf-features .ssf-fx-filters[hidden]{display:none}
.ssf-features .ssf-fx-filters{border-top:1px solid var(--fx-line);border-bottom:1px solid var(--fx-line);
	padding:18px 0;margin:14px 0 26px;display:flex;flex-direction:column;gap:16px}
@media (prefers-reduced-motion:no-preference){
	.ssf-features .ssf-fx-filters:not([hidden]){animation:ssf-fx-slide .18s ease both}
	@keyframes ssf-fx-slide{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}
.ssf-features .ssf-fx-frow{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:flex-start}
.ssf-features .ssf-fx-fgroup{display:flex;flex-direction:column;gap:8px;min-width:0}
.ssf-features .ssf-fx-fgroup>.ssf-fx-cap{font-family:var(--fx-mono);font-size:10.5px;letter-spacing:.16em;
	text-transform:uppercase;color:var(--fx-ink-faint)}
.ssf-features .ssf-fx-chips{display:flex;flex-wrap:wrap;gap:6px}
.ssf-features .ssf-fx-chip{font-size:12.5px;font-family:var(--fx-sans);background:var(--fx-card);
	border:1px solid var(--fx-line-strong);color:var(--fx-ink-soft);padding:5px 11px;cursor:pointer;
	white-space:nowrap}
.ssf-features .ssf-fx-chip:hover{border-color:var(--fx-gold);color:var(--fx-ink)}
.ssf-features .ssf-fx-chip[aria-pressed="true"]{background:var(--fx-ink);color:var(--fx-paper);border-color:var(--fx-ink)}
.ssf-features .ssf-fx-chip .n{font-family:var(--fx-mono);font-size:10.5px;opacity:.6;margin-left:5px}
.ssf-features .ssf-fx-chip.tier-p[aria-pressed="true"]{background:var(--fx-gold);border-color:var(--fx-gold);color:#241c05}
.ssf-features .ssf-fx-lchip[aria-pressed="true"]{background:var(--fx-fe);border-color:var(--fx-fe);color:#fff}
.ssf-features .ssf-fx-lchip.be[aria-pressed="true"]{background:var(--fx-be);border-color:var(--fx-be)}
.ssf-features .ssf-fx-lchip.fb[aria-pressed="true"]{background:var(--fx-fb);border-color:var(--fx-fb);color:#241c05}
.ssf-features .ssf-fx-toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fx-ink-soft);
	cursor:pointer;user-select:none}
.ssf-features .ssf-fx-toggle input{accent-color:var(--fx-gold);width:15px;height:15px}

/* ---- results ---- */
.ssf-features .ssf-fx-meta{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;
	gap:10px;margin-bottom:16px}
.ssf-features .ssf-fx-count{font-family:var(--fx-mono);font-size:13px;color:var(--fx-ink-soft)}
.ssf-features .ssf-fx-count b{color:var(--fx-gold);font-size:16px}
.ssf-features .ssf-fx-legend{display:flex;gap:14px;font-family:var(--fx-mono);font-size:11px;
	color:var(--fx-ink-faint);flex-wrap:wrap}
.ssf-features .ssf-fx-legend span{display:inline-flex;align-items:center;gap:5px}
.ssf-features .ssf-fx-sw{width:9px;height:9px;display:inline-block}
.ssf-features .ssf-fx-sw.fe{background:var(--fx-fe)}
.ssf-features .ssf-fx-sw.be{background:var(--fx-be)}
.ssf-features .ssf-fx-sw.fb{background:var(--fx-fb)}

.ssf-features .ssf-fx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.ssf-features .ssf-fx-c{background:var(--fx-card);border:1px solid var(--fx-line);border-left:3px solid var(--fx-fe);
	padding:14px 16px 15px;display:flex;flex-direction:column;gap:7px;box-shadow:var(--fx-shadow)}
.ssf-features .ssf-fx-c.be{border-left-color:var(--fx-be)}
.ssf-features .ssf-fx-c.fb{border-left-color:var(--fx-fb)}
.ssf-features .ssf-fx-c .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ssf-features .ssf-fx-c h3{font-family:var(--fx-sans);margin:0;font-size:15.5px;letter-spacing:-.01em;
	line-height:1.25;font-weight:650}
.ssf-features .ssf-fx-c p{font-family:var(--fx-sans);margin:0;font-size:13.5px;color:var(--fx-ink-soft);line-height:1.45}
.ssf-features .ssf-fx-tag{font-family:var(--fx-mono);font-size:9.5px;letter-spacing:.08em;font-weight:700;
	padding:3px 6px;white-space:nowrap;flex-shrink:0}
.ssf-features .ssf-fx-tag.fe{background:var(--fx-fe-wash);color:var(--fx-fe)}
.ssf-features .ssf-fx-tag.be{background:var(--fx-be-wash);color:var(--fx-be)}
.ssf-features .ssf-fx-tag.fb{background:var(--fx-fb-wash);color:var(--fx-fb)}
.ssf-features .ssf-fx-c .foot{display:flex;align-items:center;gap:8px;margin-top:2px;flex-wrap:wrap}
.ssf-features .ssf-fx-mod{font-family:var(--fx-mono);font-size:11px;letter-spacing:.03em;color:var(--fx-ink-faint)}
.ssf-features .ssf-fx-mod b{color:var(--fx-ink-soft);font-weight:600}
.ssf-features .ssf-fx-roadmap{font-family:var(--fx-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
	color:var(--fx-fb);border:1px solid var(--fx-fb);padding:1px 5px}
.ssf-features mark{background:var(--fx-gold-wash);color:inherit;padding:0 1px;font-weight:600}

.ssf-features .ssf-fx-empty{border:1px dashed var(--fx-line-strong);padding:48px 24px;text-align:center;
	color:var(--fx-ink-faint);font-family:var(--fx-mono);font-size:14px;grid-column:1/-1}
.ssf-features .ssf-fx-empty b{color:var(--fx-ink-soft)}
/* initial "nothing searched yet" invite — same box, a calmer solid border (not a no-results error) */
.ssf-features .ssf-fx-empty.ssf-fx-prompt{border-style:solid;background:var(--fx-card)}

@media (prefers-reduced-motion:no-preference){
	.ssf-features .ssf-fx-c{animation:ssf-fx-pop .18s ease both}
	@keyframes ssf-fx-pop{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
}
@media (max-width:560px){
	.ssf-features .ssf-fx-prompt{padding-left:12px}
	.ssf-features .ssf-fx-grid{grid-template-columns:1fr}
}