/* RDC_DPV_DESIGN_SELECTION_STYLES_START
 * Preview-only allowlisted design tokens and Design Setup surface styling.
 */
.index-menu-host:empty { display: none; }
.index-menu-host:not(:empty) { max-width: none; margin: 0; padding: 0; }
.index-menu-host .foundation-menu { box-shadow: 0 22px 55px rgba(10,18,28,.24); }

body[data-dpv-visual-skin="contrast"] {
	--ink: #f1f5fb;
	--muted: #b3c0d1;
	--line: #3b4a5c;
	--paper: #111923;
	--surface: #1a2532;
	--accent: #9bb4ff;
	--accent-soft: #27365b;
	--success: #79d6aa;
	--warn: #ffaaa3;
	background: #0c131c;
}
body[data-dpv-visual-skin="contrast"] .site-head { background: #05090e; }
body[data-dpv-visual-skin="contrast"] .ic-head { background: linear-gradient(125deg, #172343 0%, #1a2532 58%, #173328 100%); }
body[data-dpv-visual-skin="contrast"] .primary-button { border-color: #fff !important; background: #fff !important; color: #111923 !important; }
body[data-dpv-visual-skin="contrast"] .mock-popup header { background: rgba(26,37,50,.97); }

body[data-dpv-pg-shell-design="open_flow"] .page-grid { padding-top: 24px; }
body[data-dpv-pg-shell-design="open_flow"] .page-index { display: block; width: 100% !important; max-width: 100% !important; padding: 0 0 18px; border-bottom: 1px solid var(--line); }
body[data-dpv-pg-shell-design="open_flow"] .page-index .foundation-link { display: inline-block; width: auto; }
body[data-dpv-pg-shell-design="open_flow"] .page-output { display: block; width: 100% !important; max-width: 100% !important; padding: 28px 0 0; border-left: 0; }
body[data-dpv-is-section-design="quiet"] .page-output > [data-foundation-owner="IS"] { max-width: 720px; margin-right: auto; margin-left: auto; }

.design-lab-note { margin: 0 0 24px; padding: 15px 18px; border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--muted); font-size: .8rem; line-height: 1.55; }
.design-layer-tabs { margin-bottom: 24px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.design-layer-tabs button { display: inline-block; margin: 3px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); cursor: pointer; }
.design-layer-tabs button.is-active { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.design-choice-list { font-size: 0; }
.design-choice { display: inline-block; width: min(100%, 48.5%); min-width: 240px; margin: 0 1.5% 16px 0; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font-size: 1rem; vertical-align: top; }
.design-choice.is-selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.design-choice h3 { margin-bottom: 10px; font-size: 1.3rem; }
.design-choice > p { min-height: 68px; color: var(--muted); line-height: 1.55; }
.design-choice-meta { margin: 18px 0; padding-top: 12px; border-top: 1px solid var(--line); }
.design-choice-meta span { display: block; margin: 5px 0; color: var(--muted); font: .7rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.design-choice button { min-height: 39px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; }
.design-choice button.is-active { border-color: var(--ink); background: var(--ink); color: var(--surface); }

.compatibility-panel { padding: clamp(22px, 4vw, 40px); border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.compatibility-panel.is-pass { border-left: 5px solid var(--success); }
.compatibility-panel.is-blocked { border-left: 5px solid var(--warn); }
.compatibility-panel h2 { margin-bottom: 10px; }
.compatibility-panel > p { color: var(--muted); line-height: 1.6; }
.compatibility-list { margin: 20px 0 0; padding: 0; list-style: none; }
.compatibility-list li { margin: 6px 0; padding: 11px 13px; background: var(--surface); color: var(--muted); font-size: .82rem; line-height: 1.5; }
.scenario-actions { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.scenario-actions button { margin: 3px; }

.design-handoff { max-width: 900px; }
.design-handoff .query-output { max-height: 440px; }
.design-apply-row { margin-top: 18px; }
.design-apply-row button { margin: 3px; }
.design-selection-summary { margin-top: 24px; padding: 18px; border: 1px solid var(--line); background: var(--surface); }
.design-selection-summary span { display: inline-block; margin: 3px; padding: 5px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .68rem; }

@media (max-width: 720px) {
	.index-menu-host:not(:empty) { margin: 0; padding: 0; }
	.design-layer-tabs { overflow-x: auto; white-space: nowrap; }
	.design-choice { width: 100%; min-width: 0; margin-right: 0; }
}
/* RDC_DPV_DESIGN_SELECTION_STYLES_END */
