@powerhousedao/contributor-billing 0.1.40 → 0.1.42

package/dist/editors/service-offering-editor/components/ResourceTemplateSelector.js

@@ -0,0 +1,1157 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo, useCallback } from "react";
+import { selectResourceTemplate, changeResourceTemplate, addFacetOption, removeFacetOption, setFacetTarget, } from "../../../document-models/service-offering/gen/offering-management/creators.js";
+import { generateId } from "document-model/core";
+import { useResourceTemplateDocumentsInSelectedDrive } from "../../../document-models/resource-template/hooks.js";
+export function ResourceTemplateSelector({ document, dispatch, }) {
+    const templates = useResourceTemplateDocumentsInSelectedDrive();
+    const [searchQuery, setSearchQuery] = useState("");
+    const [showingSelector, setShowingSelector] = useState(false);
+    // Get the currently selected template ID from document state
+    const currentTemplateId = document.state.global.resourceTemplateId;
+    const filteredTemplates = useMemo(() => {
+        if (!templates)
+            return [];
+        if (!searchQuery.trim())
+            return templates;
+        const query = searchQuery.toLowerCase();
+        return templates.filter((t) => t.state.global.title.toLowerCase().includes(query) ||
+            t.state.global.summary.toLowerCase().includes(query));
+    }, [templates, searchQuery]);
+    const selectedTemplate = useMemo(() => {
+        if (!currentTemplateId || !templates)
+            return null;
+        return templates.find((t) => t.header.id === currentTemplateId) || null;
+    }, [currentTemplateId, templates]);
+    const handleSelectTemplate = useCallback((template) => {
+        const now = new Date().toISOString();
+        if (currentTemplateId) {
+            // If a template is already selected, use change operation
+            dispatch(changeResourceTemplate({
+                previousTemplateId: currentTemplateId,
+                newTemplateId: template.header.id,
+                lastModified: now,
+            }));
+        }
+        else {
+            // First time selection
+            dispatch(selectResourceTemplate({
+                resourceTemplateId: template.header.id,
+                lastModified: now,
+            }));
+        }
+        setShowingSelector(false);
+    }, [currentTemplateId, dispatch]);
+    const handleChangeTemplate = useCallback(() => {
+        setShowingSelector(true);
+    }, []);
+    const activeTemplates = filteredTemplates.filter((t) => t.state.global.status === "ACTIVE");
+    const otherTemplates = filteredTemplates.filter((t) => t.state.global.status !== "ACTIVE");
+    // Determine recommended template (Social Proof / Authority Bias)
+    // The most complete active template is recommended
+    const recommendedTemplateId = useMemo(() => {
+        if (!activeTemplates || activeTemplates.length === 0)
+            return null;
+        // Score templates by completeness (more services, facets, audiences = better)
+        const scored = activeTemplates.map((t) => ({
+            id: t.header.id,
+            score: t.state.global.services.length * 3 + // Services weighted highest
+                t.state.global.facetTargets.length * 2 +
+                t.state.global.targetAudiences.length +
+                (t.state.global.description ? 2 : 0) +
+                (t.state.global.thumbnailUrl ? 1 : 0),
+        }));
+        const best = scored.sort((a, b) => b.score - a.score)[0];
+        return best?.id || null;
+    }, [activeTemplates]);
+    // If a template is selected and user is not changing, show the detail view with facet selection
+    if (selectedTemplate && !showingSelector) {
+        return (_jsxs(_Fragment, { children: [_jsx("style", { children: styles }), _jsx("div", { className: "rts-container", children: _jsx(TemplateDetailView, { template: selectedTemplate, offeringDocument: document, dispatch: dispatch, onChangeTemplate: handleChangeTemplate }) })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: styles }), _jsxs("div", { className: "rts-container", children: [_jsxs("div", { className: "rts-header", children: [_jsx("div", { className: "rts-header__icon", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: _jsx("path", { d: "M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" }) }) }), _jsxs("div", { className: "rts-header__text", children: [_jsx("h2", { className: "rts-header__title", children: "Select Resource Template" }), _jsx("p", { className: "rts-header__subtitle", children: "Choose a resource template to base this service offering on. The template defines the product configuration, target audiences, and available services." })] })] }), _jsxs("div", { className: "rts-search", children: [_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: [_jsx("circle", { cx: "11", cy: "11", r: "8", strokeWidth: "2" }), _jsx("path", { d: "M21 21l-4.35-4.35", strokeWidth: "2" })] }), _jsx("input", { type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search resource templates...", className: "rts-search__input" }), searchQuery && (_jsx("button", { type: "button", onClick: () => setSearchQuery(""), className: "rts-search__clear", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12", strokeWidth: "2" }) }) }))] }), _jsx("div", { className: "rts-templates", children: !templates || templates.length === 0 ? (_jsxs("div", { className: "rts-empty", children: [_jsx("div", { className: "rts-empty__icon", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: _jsx("path", { d: "M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m6.75 12H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" }) }) }), _jsx("h3", { className: "rts-empty__title", children: "No Resource Templates Found" }), _jsx("p", { className: "rts-empty__desc", children: "Create a Resource Template first to define the base configuration for your service offering." })] })) : filteredTemplates.length === 0 ? (_jsx("div", { className: "rts-empty rts-empty--search", children: _jsxs("p", { className: "rts-empty__desc", children: ["No templates match \"", searchQuery, "\""] }) })) : (_jsxs(_Fragment, { children: [activeTemplates.length > 0 && (_jsxs("div", { className: "rts-section", children: [_jsxs("h3", { className: "rts-section__title", children: [_jsx("span", { className: "rts-section__dot rts-section__dot--active" }), "Active Templates"] }), _jsx("div", { className: "rts-grid", children: activeTemplates.map((template) => (_jsx(TemplateCard, { template: template, isSelected: currentTemplateId === template.header.id, isRecommended: template.header.id === recommendedTemplateId, onSelect: () => handleSelectTemplate(template) }, template.header.id))) })] })), otherTemplates.length > 0 && (_jsxs("div", { className: "rts-section", children: [_jsxs("h3", { className: "rts-section__title", children: [_jsx("span", { className: "rts-section__dot" }), "Other Templates"] }), _jsx("div", { className: "rts-grid", children: otherTemplates.map((template) => (_jsx(TemplateCard, { template: template, isSelected: currentTemplateId === template.header.id, onSelect: () => handleSelectTemplate(template) }, template.header.id))) })] }))] })) })] })] }));
+}
+function TemplateCard({ template, isSelected, isRecommended, onSelect, }) {
+    const { state } = template;
+    const globalState = state.global;
+    const statusStyle = getStatusStyle(globalState.status);
+    return (_jsxs("button", { type: "button", onClick: onSelect, className: `rts-card ${isSelected ? "rts-card--selected" : ""} ${isRecommended ? "rts-card--recommended" : ""}`, children: [isRecommended && !isSelected && (_jsxs("div", { className: "rts-card__recommended", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" }) }), "Recommended"] })), _jsxs("div", { className: "rts-card__header", children: [globalState.thumbnailUrl ? (_jsx("div", { className: "rts-card__thumb", style: { backgroundImage: `url(${globalState.thumbnailUrl})` } })) : (_jsx("div", { className: "rts-card__thumb rts-card__thumb--placeholder", children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }), _jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), _jsx("path", { d: "M21 15l-5-5L5 21" })] }) })), _jsxs("span", { className: "rts-card__status", style: {
+                            backgroundColor: statusStyle.bg,
+                            color: statusStyle.text,
+                        }, children: [_jsx("span", { className: "rts-card__status-dot", style: { backgroundColor: statusStyle.dot } }), globalState.status.replace("_", " ")] })] }), _jsxs("div", { className: "rts-card__body", children: [_jsx("h4", { className: "rts-card__title", children: globalState.title || "Untitled" }), _jsx("p", { className: "rts-card__summary", children: globalState.summary || "No summary provided" }), _jsxs("div", { className: "rts-card__meta", children: [globalState.targetAudiences.length > 0 && (_jsxs("span", { className: "rts-card__tag", children: [_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: [_jsx("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2", strokeWidth: "2" }), _jsx("circle", { cx: "9", cy: "7", r: "4", strokeWidth: "2" }), _jsx("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87", strokeWidth: "2" }), _jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75", strokeWidth: "2" })] }), globalState.targetAudiences.length] })), globalState.services.length > 0 && (_jsxs("span", { className: "rts-card__tag", children: [_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: [_jsx("path", { d: "M12 2L2 7l10 5 10-5-10-5z", strokeWidth: "2" }), _jsx("path", { d: "M2 17l10 5 10-5", strokeWidth: "2" }), _jsx("path", { d: "M2 12l10 5 10-5", strokeWidth: "2" })] }), globalState.services.length] })), globalState.facetTargets.length > 0 && (_jsxs("span", { className: "rts-card__tag", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("path", { d: "M3 6h18M7 12h10M10 18h4", strokeWidth: "2" }) }), globalState.facetTargets.length] }))] })] }), isSelected && (_jsx("div", { className: "rts-card__check", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("path", { d: "M5 12l5 5L20 7", strokeWidth: "2.5" }) }) }))] }));
+}
+function TemplateDetailView({ template, offeringDocument, dispatch, onChangeTemplate, }) {
+    const globalState = template.state.global;
+    const statusStyle = getStatusStyle(globalState.status);
+    // Get the current facet selections from the offering document
+    const offeringFacetTargets = offeringDocument.state.global.facetTargets;
+    // Check if an option is selected in the offering
+    const isOptionSelected = useCallback((categoryKey, optionId) => {
+        const facetTarget = offeringFacetTargets.find((f) => f.categoryKey === categoryKey);
+        return facetTarget?.selectedOptions.includes(optionId) ?? false;
+    }, [offeringFacetTargets]);
+    // Toggle a facet option in the offering
+    const handleToggleFacetOption = useCallback((categoryKey, categoryLabel, optionId) => {
+        const now = new Date().toISOString();
+        const existingFacetTarget = offeringFacetTargets.find((f) => f.categoryKey === categoryKey);
+        if (!existingFacetTarget) {
+            // Create the facet target with this option selected
+            dispatch(setFacetTarget({
+                id: generateId(),
+                categoryKey,
+                categoryLabel,
+                selectedOptions: [optionId],
+                lastModified: now,
+            }));
+        }
+        else if (existingFacetTarget.selectedOptions.includes(optionId)) {
+            // Remove the option
+            dispatch(removeFacetOption({
+                categoryKey,
+                optionId,
+                lastModified: now,
+            }));
+        }
+        else {
+            // Add the option
+            dispatch(addFacetOption({
+                categoryKey,
+                optionId,
+                lastModified: now,
+            }));
+        }
+    }, [offeringFacetTargets, dispatch]);
+    // Calculate facet completion progress (Goal-Gradient Effect)
+    const facetProgress = useMemo(() => {
+        const totalOptions = globalState.facetTargets.reduce((sum, facet) => sum + facet.selectedOptions.length, 0);
+        const selectedOptions = offeringFacetTargets.reduce((sum, facet) => sum + facet.selectedOptions.length, 0);
+        const percent = totalOptions > 0 ? Math.round((selectedOptions / totalOptions) * 100) : 0;
+        return { total: totalOptions, selected: selectedOptions, percent };
+    }, [globalState.facetTargets, offeringFacetTargets]);
+    return (_jsxs("div", { className: "rtd-container", children: [_jsx("div", { className: "rtd-selected-header", children: _jsxs("div", { className: "rtd-selected-header__info", children: [_jsxs("span", { className: "rtd-selected-header__badge", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M5 12l5 5L20 7" }) }), "Selected Template"] }), _jsxs("button", { type: "button", onClick: onChangeTemplate, className: "rtd-selected-header__change", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }), "Change Template"] })] }) }), _jsxs("section", { className: "rtd-hero", children: [_jsx("div", { className: "rtd-hero__thumbnail-area", children: _jsxs("div", { className: "rtd-hero__thumbnail", style: {
+                                backgroundImage: globalState.thumbnailUrl
+                                    ? `url(${globalState.thumbnailUrl})`
+                                    : undefined,
+                            }, children: [!globalState.thumbnailUrl && (_jsx("div", { className: "rtd-hero__thumbnail-placeholder", children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }), _jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), _jsx("path", { d: "M21 15l-5-5L5 21" })] }) })), _jsxs("span", { className: "rtd-hero__status", style: {
+                                        backgroundColor: statusStyle.bg,
+                                        color: statusStyle.text,
+                                    }, children: [_jsx("span", { className: "rtd-hero__status-dot", style: { backgroundColor: statusStyle.dot } }), globalState.status.replace("_", " ")] })] }) }), _jsxs("div", { className: "rtd-hero__identity", children: [_jsx("h1", { className: "rtd-hero__title", children: globalState.title || "Untitled Template" }), globalState.targetAudiences.length > 0 && (_jsx("div", { className: "rtd-hero__audiences", children: globalState.targetAudiences.map((audience) => (_jsx("span", { className: "rtd-hero__audience-tag", style: audience.color
+                                        ? {
+                                            backgroundColor: `${audience.color}15`,
+                                            borderColor: `${audience.color}40`,
+                                            color: audience.color,
+                                        }
+                                        : undefined, children: audience.label }, audience.id))) })), _jsx("p", { className: "rtd-hero__summary", children: globalState.summary || "No summary provided" })] })] }), globalState.description && (_jsxs("section", { className: "rtd-card", children: [_jsxs("div", { className: "rtd-card__header", children: [_jsx("div", { className: "rtd-card__icon rtd-card__icon--violet", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: _jsx("path", { d: "M4 6h16M4 12h16M4 18h10" }) }) }), _jsx("div", { children: _jsx("h3", { className: "rtd-card__title", children: "Description" }) })] }), _jsx("p", { className: "rtd-card__text", children: globalState.description })] })), _jsxs("div", { className: "rtd-grid", children: [_jsxs("section", { className: "rtd-card", children: [_jsxs("div", { className: "rtd-card__header", children: [_jsx("div", { className: "rtd-card__icon rtd-card__icon--emerald", children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: [_jsx("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }), _jsx("path", { d: "M2 17l10 5 10-5" }), _jsx("path", { d: "M2 12l10 5 10-5" })] }) }), _jsxs("div", { children: [_jsx("h3", { className: "rtd-card__title", children: "Formation & Setup" }), _jsx("p", { className: "rtd-card__subtitle", children: "One-time setup services" })] })] }), globalState.setupServices.length > 0 ? (_jsx("div", { className: "rtd-services", children: globalState.setupServices.map((service, index) => (_jsxs("div", { className: "rtd-service", children: [_jsx("span", { className: "rtd-service__bullet" }), _jsx("span", { className: "rtd-service__text", children: service })] }, index))) })) : (_jsx("p", { className: "rtd-card__empty", children: "No setup services defined" }))] }), _jsxs("section", { className: "rtd-card", children: [_jsxs("div", { className: "rtd-card__header", children: [_jsx("div", { className: "rtd-card__icon rtd-card__icon--amber", children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: [_jsx("path", { d: "M12 8v4l3 3" }), _jsx("circle", { cx: "12", cy: "12", r: "9" })] }) }), _jsxs("div", { children: [_jsx("h3", { className: "rtd-card__title", children: "Recurring Services" }), _jsx("p", { className: "rtd-card__subtitle", children: "Ongoing services included" })] })] }), globalState.recurringServices.length > 0 ? (_jsx("div", { className: "rtd-services", children: globalState.recurringServices.map((service, index) => (_jsxs("div", { className: "rtd-service", children: [_jsx("span", { className: "rtd-service__bullet rtd-service__bullet--recurring" }), _jsx("span", { className: "rtd-service__text", children: service })] }, index))) })) : (_jsx("p", { className: "rtd-card__empty", children: "No recurring services defined" }))] })] }), globalState.facetTargets.length > 0 && (_jsxs("section", { className: "rtd-card", children: [_jsxs("div", { className: "rtd-card__header rtd-card__header--with-progress", children: [_jsxs("div", { className: "rtd-card__header-left", children: [_jsx("div", { className: "rtd-card__icon rtd-card__icon--sky", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: _jsx("path", { d: "M3 6h18M7 12h10M10 18h4" }) }) }), _jsxs("div", { children: [_jsx("h3", { className: "rtd-card__title", children: "Facet Targeting" }), _jsx("p", { className: "rtd-card__subtitle", children: "Select which facet options apply to this offering" })] })] }), _jsxs("div", { className: "rtd-facet-progress", children: [_jsx("div", { className: "rtd-facet-progress__bar", children: _jsx("div", { className: "rtd-facet-progress__fill", style: { width: `${facetProgress.percent}%` } }) }), _jsxs("span", { className: "rtd-facet-progress__text", children: [facetProgress.selected, " of ", facetProgress.total, " selected", facetProgress.percent === 100 && (_jsx("span", { className: "rtd-facet-progress__complete", children: " \u2713" }))] })] })] }), _jsx("div", { className: "rtd-facets", children: globalState.facetTargets.map((facet) => (_jsxs("div", { className: "rtd-facet rtd-facet--selectable", children: [_jsx("span", { className: "rtd-facet__label", children: facet.categoryLabel }), _jsx("div", { className: "rtd-facet__options", children: facet.selectedOptions.map((option) => {
+                                        const selected = isOptionSelected(facet.categoryKey, option);
+                                        return (_jsxs("button", { type: "button", className: `rtd-facet__option rtd-facet__option--toggle ${selected ? "rtd-facet__option--selected" : ""}`, onClick: () => handleToggleFacetOption(facet.categoryKey, facet.categoryLabel, option), children: [_jsx("span", { className: "rtd-facet__checkbox", children: selected && (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", children: _jsx("path", { d: "M5 12l5 5L20 7" }) })) }), option.replace(/-/g, " ")] }, option));
+                                    }) })] }, facet.id))) })] })), globalState.services.length > 0 && (_jsxs("section", { className: "rtd-card", children: [_jsxs("div", { className: "rtd-card__header", children: [_jsx("div", { className: "rtd-card__icon rtd-card__icon--teal", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: _jsx("path", { d: "M4 6h16M4 10h16M4 14h10M4 18h6" }) }) }), _jsxs("div", { children: [_jsx("h3", { className: "rtd-card__title", children: "Services Defined" }), _jsxs("p", { className: "rtd-card__subtitle", children: [globalState.services.length, " service", globalState.services.length !== 1 ? "s" : "", " available"] })] })] }), _jsx("div", { className: "rtd-services-list", children: globalState.services.map((service) => (_jsxs("div", { className: "rtd-service-item", children: [_jsxs("div", { className: "rtd-service-item__main", children: [_jsx("span", { className: "rtd-service-item__title", children: service.title }), service.isSetupFormation && (_jsx("span", { className: "rtd-service-item__badge", children: "Setup" }))] }), service.description && (_jsx("p", { className: "rtd-service-item__desc", children: service.description }))] }, service.id))) })] })), _jsxs("section", { className: "rtd-metadata", children: [globalState.operatorId && (_jsxs("div", { className: "rtd-meta-field", children: [_jsx("span", { className: "rtd-meta-field__label", children: "Operator ID" }), _jsx("span", { className: "rtd-meta-field__value rtd-meta-field__value--mono", children: globalState.operatorId })] })), globalState.infoLink && (_jsxs("div", { className: "rtd-meta-field", children: [_jsx("span", { className: "rtd-meta-field__label", children: "More Info" }), _jsxs("a", { href: globalState.infoLink, target: "_blank", rel: "noopener noreferrer", className: "rtd-meta-field__link", children: [globalState.infoLink, _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }), _jsx("polyline", { points: "15 3 21 3 21 9" }), _jsx("line", { x1: "10", y1: "14", x2: "21", y2: "3" })] })] })] }))] })] }));
+}
+function getStatusStyle(status) {
+    const statusColors = {
+        ACTIVE: {
+            bg: "var(--rts-emerald-light)",
+            text: "var(--rts-emerald)",
+            dot: "var(--rts-emerald)",
+        },
+        DRAFT: {
+            bg: "var(--rts-slate-light)",
+            text: "var(--rts-slate)",
+            dot: "var(--rts-slate)",
+        },
+        COMING_SOON: {
+            bg: "var(--rts-sky-light)",
+            text: "var(--rts-sky)",
+            dot: "var(--rts-sky)",
+        },
+        DEPRECATED: {
+            bg: "var(--rts-rose-light)",
+            text: "var(--rts-rose)",
+            dot: "var(--rts-rose)",
+        },
+    };
+    return statusColors[status] || statusColors.DRAFT;
+}
+const styles = `
+  .rts-container {
+    --rts-font: 'Instrument Sans', system-ui, sans-serif;
+    --rts-mono: 'DM Mono', 'SF Mono', monospace;
+
+    --rts-ink: #1a1f36;
+    --rts-ink-light: #4a5578;
+    --rts-ink-muted: #8792a8;
+    --rts-surface: #ffffff;
+    --rts-surface-raised: #fafbfc;
+    --rts-border: #e4e8f0;
+    --rts-border-light: #f0f2f7;
+
+    --rts-teal: #14b8a6;
+    --rts-teal-light: #ccfbf1;
+    --rts-violet: #7c5cff;
+    --rts-violet-light: #f4f1ff;
+    --rts-emerald: #10b981;
+    --rts-emerald-light: #e8faf3;
+    --rts-sky: #0ea5e9;
+    --rts-sky-light: #e8f7fc;
+    --rts-rose: #f43f5e;
+    --rts-rose-light: #fef1f3;
+    --rts-slate: #64748b;
+    --rts-slate-light: #f1f5f9;
+    --rts-amber: #f59e0b;
+    --rts-amber-light: #fef7e6;
+
+    font-family: var(--rts-font);
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  }
+
+  /* Header */
+  .rts-header {
+    display: flex;
+    align-items: flex-start;
+    gap: 20px;
+    padding: 24px;
+    background: var(--rts-surface);
+    border-radius: 16px;
+    box-shadow: 0 1px 3px rgba(26, 31, 54, 0.04), 0 4px 16px rgba(26, 31, 54, 0.06);
+    border-left: 4px solid var(--rts-teal);
+  }
+
+  .rts-header__icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+    background: var(--rts-teal-light);
+    color: var(--rts-teal);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .rts-header__icon svg {
+    width: 24px;
+    height: 24px;
+  }
+
+  .rts-header__text {
+    flex: 1;
+  }
+
+  .rts-header__title {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--rts-ink);
+    margin: 0 0 8px;
+    letter-spacing: -0.02em;
+  }
+
+  .rts-header__subtitle {
+    font-size: 0.9375rem;
+    color: var(--rts-ink-light);
+    margin: 0;
+    line-height: 1.6;
+    max-width: 600px;
+  }
+
+  /* Search */
+  .rts-search {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 14px 18px;
+    background: var(--rts-surface);
+    border: 1.5px solid var(--rts-border);
+    border-radius: 12px;
+    transition: all 0.15s ease;
+  }
+
+  .rts-search:focus-within {
+    border-color: var(--rts-teal);
+    box-shadow: 0 0 0 3px var(--rts-teal-light);
+  }
+
+  .rts-search > svg {
+    width: 20px;
+    height: 20px;
+    color: var(--rts-ink-muted);
+    flex-shrink: 0;
+  }
+
+  .rts-search__input {
+    flex: 1;
+    font-family: var(--rts-font);
+    font-size: 0.9375rem;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: var(--rts-ink);
+  }
+
+  .rts-search__input::placeholder {
+    color: var(--rts-ink-muted);
+  }
+
+  .rts-search__clear {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    background: var(--rts-border-light);
+    border: none;
+    border-radius: 6px;
+    color: var(--rts-ink-muted);
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .rts-search__clear:hover {
+    background: var(--rts-border);
+    color: var(--rts-ink-light);
+  }
+
+  .rts-search__clear svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  /* Templates */
+  .rts-templates {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  }
+
+  .rts-section__title {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--rts-ink-light);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin: 0 0 16px;
+  }
+
+  .rts-section__dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--rts-slate);
+  }
+
+  .rts-section__dot--active {
+    background: var(--rts-emerald);
+  }
+
+  .rts-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 16px;
+  }
+
+  /* Card */
+  .rts-card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    background: var(--rts-surface);
+    border: 2px solid var(--rts-border-light);
+    border-radius: 16px;
+    overflow: hidden;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .rts-card:hover {
+    border-color: var(--rts-border);
+    box-shadow: 0 4px 16px rgba(26, 31, 54, 0.08);
+    transform: translateY(-2px);
+  }
+
+  .rts-card--selected {
+    border-color: var(--rts-teal);
+    background: var(--rts-teal-light);
+  }
+
+  .rts-card--selected:hover {
+    border-color: var(--rts-teal);
+  }
+
+  .rts-card__header {
+    position: relative;
+    height: 100px;
+  }
+
+  .rts-card__thumb {
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-position: center;
+    background-color: var(--rts-border-light);
+  }
+
+  .rts-card__thumb--placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, var(--rts-border-light) 0%, var(--rts-border) 100%);
+    color: var(--rts-ink-muted);
+  }
+
+  .rts-card__thumb--placeholder svg {
+    width: 32px;
+    height: 32px;
+    opacity: 0.5;
+  }
+
+  .rts-card__status {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+    font-size: 0.625rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    border-radius: 100px;
+    backdrop-filter: blur(8px);
+  }
+
+  .rts-card__status-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+  }
+
+  .rts-card__body {
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    flex: 1;
+  }
+
+  .rts-card__title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--rts-ink);
+    margin: 0;
+    letter-spacing: -0.01em;
+  }
+
+  .rts-card__summary {
+    font-size: 0.8125rem;
+    color: var(--rts-ink-light);
+    margin: 0;
+    line-height: 1.5;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .rts-card__meta {
+    display: flex;
+    gap: 12px;
+    margin-top: auto;
+    padding-top: 8px;
+  }
+
+  .rts-card__tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 0.75rem;
+    color: var(--rts-ink-muted);
+  }
+
+  .rts-card__tag svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .rts-card__check {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background: var(--rts-teal);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.4);
+  }
+
+  .rts-card__check svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  /* Recommended Badge - Social Proof */
+  .rts-card--recommended {
+    border-color: var(--rts-amber);
+    box-shadow: 0 0 0 1px var(--rts-amber), 0 4px 16px rgba(245, 158, 11, 0.15);
+  }
+
+  .rts-card--recommended:hover {
+    border-color: var(--rts-amber);
+    box-shadow: 0 0 0 1px var(--rts-amber), 0 6px 20px rgba(245, 158, 11, 0.2);
+  }
+
+  .rts-card__recommended {
+    position: absolute;
+    top: -1px;
+    right: 40px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 6px 12px;
+    font-size: 0.625rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: white;
+    background: linear-gradient(135deg, var(--rts-amber) 0%, #d97706 100%);
+    border-radius: 0 0 8px 8px;
+    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
+    z-index: 5;
+  }
+
+  .rts-card__recommended svg {
+    width: 12px;
+    height: 12px;
+    fill: currentColor;
+    stroke: currentColor;
+  }
+
+  /* Empty State */
+  .rts-empty {
+    padding: 48px;
+    text-align: center;
+    background: var(--rts-surface);
+    border-radius: 16px;
+    border: 2px dashed var(--rts-border);
+  }
+
+  .rts-empty--search {
+    padding: 24px;
+    border-style: solid;
+    background: var(--rts-surface-raised);
+  }
+
+  .rts-empty__icon {
+    width: 64px;
+    height: 64px;
+    margin: 0 auto 16px;
+    color: var(--rts-ink-muted);
+    opacity: 0.5;
+  }
+
+  .rts-empty__icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .rts-empty__title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--rts-ink);
+    margin: 0 0 8px;
+  }
+
+  .rts-empty__desc {
+    font-size: 0.9375rem;
+    color: var(--rts-ink-muted);
+    margin: 0;
+    max-width: 400px;
+    margin: 0 auto;
+    line-height: 1.6;
+  }
+
+  /* ========================================
+     Template Detail View (Read-Only)
+     ======================================== */
+
+  .rtd-container {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  /* Selected Header */
+  .rtd-selected-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px;
+    background: var(--rts-teal-light);
+    border: 2px solid var(--rts-teal);
+    border-radius: 12px;
+  }
+
+  .rtd-selected-header__info {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .rtd-selected-header__badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--rts-teal);
+  }
+
+  .rtd-selected-header__badge svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  .rtd-selected-header__change {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 16px;
+    font-family: var(--rts-font);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--rts-teal);
+    background: white;
+    border: 1.5px solid var(--rts-teal);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .rtd-selected-header__change:hover {
+    background: var(--rts-teal);
+    color: white;
+  }
+
+  .rtd-selected-header__change svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  /* Hero Section */
+  .rtd-hero {
+    display: grid;
+    grid-template-columns: 180px 1fr;
+    gap: 24px;
+    background: var(--rts-surface);
+    border-radius: 16px;
+    padding: 24px;
+    box-shadow: 0 1px 3px rgba(26, 31, 54, 0.04), 0 4px 16px rgba(26, 31, 54, 0.06);
+  }
+
+  .rtd-hero__thumbnail-area {
+    position: relative;
+  }
+
+  .rtd-hero__thumbnail {
+    width: 180px;
+    height: 135px;
+    border-radius: 12px;
+    background: linear-gradient(135deg, var(--rts-border-light) 0%, var(--rts-border) 100%);
+    background-size: cover;
+    background-position: center;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .rtd-hero__thumbnail-placeholder {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--rts-ink-muted);
+  }
+
+  .rtd-hero__thumbnail-placeholder svg {
+    width: 40px;
+    height: 40px;
+    opacity: 0.5;
+  }
+
+  .rtd-hero__status {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 5px 12px;
+    font-size: 0.6875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    border-radius: 100px;
+    backdrop-filter: blur(8px);
+  }
+
+  .rtd-hero__status-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+  }
+
+  .rtd-hero__identity {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .rtd-hero__title {
+    font-size: 1.75rem;
+    font-weight: 700;
+    color: var(--rts-ink);
+    margin: 0;
+    letter-spacing: -0.02em;
+  }
+
+  .rtd-hero__audiences {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .rtd-hero__audience-tag {
+    display: inline-flex;
+    align-items: center;
+    padding: 5px 12px;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    border-radius: 100px;
+    background: var(--rts-teal-light);
+    border: 1px solid rgba(20, 184, 166, 0.2);
+    color: var(--rts-teal);
+  }
+
+  .rtd-hero__summary {
+    font-size: 0.9375rem;
+    line-height: 1.6;
+    color: var(--rts-ink-light);
+    margin: 0;
+  }
+
+  /* Cards */
+  .rtd-card {
+    background: var(--rts-surface);
+    border-radius: 16px;
+    padding: 24px;
+    box-shadow: 0 1px 3px rgba(26, 31, 54, 0.04), 0 4px 16px rgba(26, 31, 54, 0.06);
+  }
+
+  .rtd-card__header {
+    display: flex;
+    align-items: flex-start;
+    gap: 14px;
+    margin-bottom: 16px;
+  }
+
+  .rtd-card__header--with-progress {
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  .rtd-card__header-left {
+    display: flex;
+    align-items: flex-start;
+    gap: 14px;
+  }
+
+  /* Goal-Gradient Progress Bar for Facet Selection */
+  .rtd-facet-progress {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 6px;
+    min-width: 140px;
+  }
+
+  .rtd-facet-progress__bar {
+    width: 100%;
+    height: 6px;
+    background: var(--rts-border-light);
+    border-radius: 100px;
+    overflow: hidden;
+  }
+
+  .rtd-facet-progress__fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--rts-sky), var(--rts-emerald));
+    border-radius: 100px;
+    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .rtd-facet-progress__text {
+    font-size: 0.6875rem;
+    color: var(--rts-ink-muted);
+    font-weight: 500;
+  }
+
+  .rtd-facet-progress__complete {
+    color: var(--rts-emerald);
+    font-weight: 600;
+  }
+
+  .rtd-card__icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .rtd-card__icon svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  .rtd-card__icon--violet {
+    background: var(--rts-violet-light);
+    color: var(--rts-violet);
+  }
+
+  .rtd-card__icon--emerald {
+    background: var(--rts-emerald-light);
+    color: var(--rts-emerald);
+  }
+
+  .rtd-card__icon--amber {
+    background: var(--rts-amber-light);
+    color: var(--rts-amber);
+  }
+
+  .rtd-card__icon--sky {
+    background: var(--rts-sky-light);
+    color: var(--rts-sky);
+  }
+
+  .rtd-card__icon--teal {
+    background: var(--rts-teal-light);
+    color: var(--rts-teal);
+  }
+
+  .rtd-card__title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--rts-ink);
+    margin: 0;
+  }
+
+  .rtd-card__subtitle {
+    font-size: 0.8125rem;
+    color: var(--rts-ink-muted);
+    margin: 2px 0 0;
+  }
+
+  .rtd-card__text {
+    font-size: 0.9375rem;
+    line-height: 1.7;
+    color: var(--rts-ink-light);
+    margin: 0;
+  }
+
+  .rtd-card__empty {
+    font-size: 0.875rem;
+    color: var(--rts-ink-muted);
+    font-style: italic;
+    margin: 0;
+  }
+
+  .rtd-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+  }
+
+  /* Services */
+  .rtd-services {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .rtd-service {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 12px;
+    background: var(--rts-surface-raised);
+    border-radius: 8px;
+  }
+
+  .rtd-service__bullet {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--rts-emerald);
+    flex-shrink: 0;
+  }
+
+  .rtd-service__bullet--recurring {
+    background: var(--rts-amber);
+  }
+
+  .rtd-service__text {
+    font-size: 0.875rem;
+    color: var(--rts-ink);
+  }
+
+  /* Facets */
+  .rtd-facets {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+  }
+
+  .rtd-facet {
+    padding: 14px;
+    background: var(--rts-surface-raised);
+    border-radius: 10px;
+    border: 1px solid var(--rts-border-light);
+  }
+
+  .rtd-facet__label {
+    display: block;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--rts-ink-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    margin-bottom: 8px;
+  }
+
+  .rtd-facet__options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .rtd-facet__option {
+    display: inline-block;
+    padding: 4px 10px;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--rts-sky);
+    background: var(--rts-sky-light);
+    border-radius: 6px;
+    text-transform: capitalize;
+  }
+
+  /* Interactive facet options */
+  .rtd-facet--selectable {
+    background: var(--rts-surface);
+    border: 1.5px solid var(--rts-border);
+  }
+
+  .rtd-facet__option--toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 14px;
+    font-family: var(--rts-font);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--rts-ink-light);
+    background: var(--rts-surface-raised);
+    border: 1.5px solid var(--rts-border);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    text-transform: capitalize;
+  }
+
+  .rtd-facet__option--toggle:hover {
+    border-color: var(--rts-sky);
+    background: var(--rts-sky-light);
+    color: var(--rts-sky);
+  }
+
+  .rtd-facet__option--toggle.rtd-facet__option--selected {
+    background: var(--rts-teal-light);
+    border-color: var(--rts-teal);
+    color: var(--rts-teal);
+  }
+
+  .rtd-facet__checkbox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    border-radius: 4px;
+    background: var(--rts-surface);
+    border: 1.5px solid var(--rts-border);
+    flex-shrink: 0;
+    transition: all 0.15s ease;
+  }
+
+  .rtd-facet__option--toggle:hover .rtd-facet__checkbox {
+    border-color: var(--rts-sky);
+  }
+
+  .rtd-facet__option--selected .rtd-facet__checkbox {
+    background: var(--rts-teal);
+    border-color: var(--rts-teal);
+  }
+
+  .rtd-facet__checkbox svg {
+    width: 12px;
+    height: 12px;
+    color: white;
+  }
+
+  /* Services List */
+  .rtd-services-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .rtd-service-item {
+    padding: 14px 16px;
+    background: var(--rts-surface-raised);
+    border-radius: 10px;
+    border: 1px solid var(--rts-border-light);
+  }
+
+  .rtd-service-item__main {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .rtd-service-item__title {
+    font-size: 0.9375rem;
+    font-weight: 600;
+    color: var(--rts-ink);
+  }
+
+  .rtd-service-item__badge {
+    padding: 2px 8px;
+    font-size: 0.625rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--rts-emerald);
+    background: var(--rts-emerald-light);
+    border-radius: 4px;
+  }
+
+  .rtd-service-item__desc {
+    font-size: 0.8125rem;
+    color: var(--rts-ink-light);
+    margin: 6px 0 0;
+    line-height: 1.5;
+  }
+
+  /* Metadata */
+  .rtd-metadata {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+    padding: 20px;
+    background: var(--rts-surface);
+    border-radius: 12px;
+    box-shadow: 0 1px 3px rgba(26, 31, 54, 0.04);
+  }
+
+  .rtd-meta-field {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .rtd-meta-field__label {
+    font-size: 0.6875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--rts-ink-muted);
+  }
+
+  .rtd-meta-field__value {
+    font-size: 0.9375rem;
+    color: var(--rts-ink);
+  }
+
+  .rtd-meta-field__value--mono {
+    font-family: var(--rts-mono);
+    font-size: 0.875rem;
+  }
+
+  .rtd-meta-field__link {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.875rem;
+    color: var(--rts-teal);
+    text-decoration: none;
+    transition: color 0.15s ease;
+  }
+
+  .rtd-meta-field__link:hover {
+    color: #0d9488;
+  }
+
+  .rtd-meta-field__link svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  /* Responsive */
+  @media (max-width: 900px) {
+    .rtd-hero {
+      grid-template-columns: 1fr;
+    }
+
+    .rtd-hero__thumbnail-area {
+      order: -1;
+    }
+
+    .rtd-hero__thumbnail {
+      width: 100%;
+      height: 160px;
+    }
+
+    .rtd-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .rtd-facets {
+      grid-template-columns: 1fr;
+    }
+
+    .rtd-metadata {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .rts-header {
+      flex-direction: column;
+    }
+
+    .rts-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+`;