/* The SearchStack widget on askthissite.com: the same build and theme as searchstack.dev, in EveryPage orange. */
:root {
	/* The Ask dialog opens from the typeahead, so it must sit above the list that opened it. */
	--searchstack-ask-z: 2100;
	--searchstack-list-width: min(40rem, calc(100vw - 2rem));
	--searchstack-list-max-height: 24em;
	--searchstack-list-border-radius: 10px;
	--searchstack-list-border-color: #e5e7eb;
	--searchstack-list-background-color: #fff;
	--searchstack-list-item-background-hover-color: rgba(249, 115, 22, .10);
	--searchstack-list-item-background-focused-color: rgba(249, 115, 22, .16);
	--searchstack-mobile-background-color: #fff;
	--searchstack-mobile-list-item-background-hover-color: rgba(249, 115, 22, .10);
	--searchstack-mobile-list-item-background-focused-color: rgba(249, 115, 22, .16);
	--ep-row-title-color: #18181b;
	--ep-row-crumb-color: #71717a;
}
html .searchstack-ask-card, html .searchstack-ask-row {
	--searchstack-ask-accent-color: #f97316;
	--searchstack-ask-hover-color: rgba(249, 115, 22, .12);
	--searchstack-ask-selected-color: rgba(249, 115, 22, .24);
	--searchstack-ask-background-color: #fff;
	--searchstack-ask-text-color: #18181b;
	--searchstack-ask-border-color: #e5e7eb;
	--searchstack-ask-muted-color: #71717a;
}
.ep-row { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.ep-row-icon { flex: 0 0 auto; color: #f97316; display: flex; margin-top: 1px; }
.ep-row-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ep-row-title { font-weight: 600; font-size: .875rem; color: var(--ep-row-title-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-row-crumb { font-size: .75rem; color: var(--ep-row-crumb-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Pages appear one after another on screen 02. */
@keyframes ep-in {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: none; }
}

/* The page is light in either OS setting, so the widget is too: a dark list over a light page looked broken. */
body { margin: 0; background: #fbfaf8; }

/* Tailwind v4 resets buttons to the default cursor; anything clickable here should say so. */
button:not(:disabled), [role="button"]:not([aria-disabled="true"]) { cursor: pointer; }