/* RDC_DPV_BASE_DESIGN_START */
:root {
	--ink: #2b3744;
	--copy: #51606f;
	--muted: #647080;
	--line: #d9dfe5;
	--paper: #f5f7f8;
	--surface: #ffffff;
	--accent: #3959d9;
	--accent-soft: #e9edff;
	--warn: #a33a36;
	--success: #1e7450;
	--ic-title-color: #2f6f6a;
	--pg-title-color: #4e6076;
	--is-title-color: #72566f;
	--font-ic-title: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
	--font-ic-copy: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;
	--font-pg-title: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-pg-title-alt: "Trebuchet MS", "Avenir Next", Arial, sans-serif;
	--font-is-title: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--radius: 18px;
	--content: 1180px;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--ink);
	background: var(--paper);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { min-width: 280px; min-height: 100vh; margin: 0; background: var(--paper); color: var(--copy); }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img, svg, video, canvas { max-width: 100%; }
button, a, input, select, textarea { transition: border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease, opacity .2s ease, transform .2s ease; }
.foundation-is-host > [data-foundation-owner="IS"], .foundation-is-host > [data-foundation-owner="SET_IS"] { animation: dpv-content-enter .28s cubic-bezier(.2,.7,.2,1); }
@keyframes dpv-content-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

.site-head {
	position: sticky;
	top: 0;
	z-index: 20;
	min-height: 68px;
	border-bottom: 1px solid rgba(24, 32, 42, .1);
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(16px);
}

.site-head-inner {
	max-width: 1560px;
	min-height: 68px;
	margin: 0 auto;
	padding: 0 clamp(14px, 4vw, 64px);
	text-align: center;
}

.site-head-inner::after,
.foundation-pg::after,
.pg-head::after,
.is-row::after,
.mock-popup header::after,
.is-summary::after { display: block; clear: both; content: ""; }

.site-mark {
	float: left;
	padding: 26px 0 23px;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .2em;
	text-decoration: none;
}

.site-nav {
	display: inline-block;
	max-width: calc(100% - 210px);
	min-height: 67px;
	overflow-x: auto;
	white-space: nowrap;
	vertical-align: top;
}

.site-nav a {
	display: inline-block;
	margin: 0 clamp(6px, 1.4vw, 18px);
	padding: 24px 0 20px;
	border-bottom: 2px solid transparent;
	color: var(--muted);
	font-size: .83rem;
	text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] { border-bottom-color: var(--ink); color: var(--ink); }

.head-action,
.canvas-tag {
	float: right;
	margin: 16px 0 0;
	border: 0;
	background: transparent;
	color: var(--muted);
	font-size: .74rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.head-action { padding: 10px 0; cursor: pointer; }
.head-action:hover, .head-action:focus-visible { color: var(--accent); }

.example-bar {
	position: relative;
	z-index: 8;
	padding: 10px clamp(14px, 4vw, 64px);
	border-bottom: 1px solid var(--line);
	background: var(--surface);
	text-align: center;
}

.example-bar strong { display: inline-block; margin: 6px 12px 6px 0; color: var(--muted); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.example-bar button, .example-bar a { display: inline-block; margin: 3px; padding: 7px 11px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--muted); font-size: .76rem; text-decoration: none; cursor: pointer; }
.example-bar button:hover, .example-bar button:focus-visible, .example-bar button.is-active, .example-bar a:hover, .example-bar a:focus-visible { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.eyebrow, .breadcrumb, .output-label, .sample-kicker { margin: 0 0 14px; color: var(--accent); font-size: .72rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--ink); }
h1 { max-width: 18ch; margin-bottom: 24px; font-size: clamp(2.5rem, 7vw, 6.7rem); font-weight: 560; letter-spacing: -.055em; line-height: .96; }
h2, h3 { font-weight: 620; letter-spacing: -.025em; }
.lede { max-width: 690px; color: var(--muted); font-size: clamp(1.04rem, 2vw, 1.3rem); line-height: 1.65; }

.primary-button, .text-link, .foundation-link, .quiet-action, .pg-actions button, .is-row-actions button, .detail-actions button, .form-actions button, .is-tools button, .is-pager button, .auth-links button {
	display: inline-block;
	min-height: 42px;
	padding: 10px 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink);
	line-height: 20px;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
}

.primary-button { border-color: var(--ink) !important; background: var(--ink) !important; color: white !important; }
.primary-button:hover, .primary-button:focus-visible { border-color: var(--accent) !important; background: var(--accent) !important; }
.text-link { border: 0; color: var(--accent); font-weight: 650; }
.text-link::after { margin-left: 7px; content: " →"; }
.danger-link { color: var(--warn) !important; }
button[disabled] { cursor: not-allowed; opacity: .42; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

.canvas-intro { max-width: var(--content); margin: 0 auto; padding: clamp(72px, 11vw, 150px) clamp(20px, 5vw, 76px) 56px; }
.canvas-intro h1 { font-size: clamp(2.5rem, 6vw, 5.5rem); }

.foundation-canvas { max-width: 1480px; margin: 0 auto; padding: clamp(28px, 5vw, 70px) clamp(14px, 4vw, 60px) 120px; }
.index-menu-host:empty { display: none; }
.index-menu-host:not(:empty) { max-width: 1480px; margin: 20px auto 0; padding: 0 clamp(14px, 4vw, 60px); }
.foundation-ic { width: 100%; }
.ic-head { padding: clamp(38px, 7vw, 90px) clamp(20px, 5vw, 70px); border: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; background: var(--surface); }
.ic-head h1 { max-width: 16ch; margin-bottom: 16px; font-size: clamp(2.3rem, 6vw, 5.7rem); }
.ic-posture { margin: 0; color: var(--muted); }

.foundation-menu { padding: 10px; border: 1px solid var(--line); border-top: 0; background: #eef1f4; white-space: normal; }
.foundation-menu .foundation-link { margin: 3px; background: transparent; }
.foundation-menu .foundation-link.is-active, .foundation-menu .foundation-link:hover, .foundation-menu .foundation-link:focus-visible { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.foundation-pg-host { min-height: 360px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--surface); }
.foundation-pg { min-height: 360px; padding: clamp(20px, 4vw, 52px); }
.pg-head { padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.pg-head-copy { float: left; width: min(100%, 760px); }
.pg-head-copy h2 { margin-bottom: 12px; font-size: clamp(2rem, 4vw, 3.7rem); }
.pg-head-copy p:last-child { max-width: 65ch; margin-bottom: 0; color: var(--muted); line-height: 1.65; }
.pg-actions { float: right; max-width: 360px; padding: 5px 0 0 20px; text-align: right; }
.pg-actions button { margin: 3px; }
.foundation-is-host { padding-top: 26px; }

.foundation-notice { display: none; margin: 18px 0 0; padding: 13px 48px 13px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); }
.foundation-notice.is-visible { position: relative; display: block; }
.foundation-notice.is-success { border-color: rgba(30, 116, 80, .3); color: var(--success); }
.foundation-notice.is-warning { border-color: rgba(163, 58, 54, .3); color: var(--warn); }
.foundation-notice button { position: absolute; top: 4px; right: 5px; padding: 7px 11px; border: 0; background: transparent; color: inherit; cursor: pointer; }
#globalNotice { position: fixed; right: 18px; bottom: 18px; z-index: 80; width: min(440px, calc(100vw - 36px)); box-shadow: 0 18px 50px rgba(24, 32, 42, .16); }

.is-tools { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.is-tools label { display: block; margin-bottom: 7px; color: var(--muted); font-size: .76rem; }
.is-tools input { width: min(100%, 520px); min-height: 43px; margin: 3px 6px 3px 0; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.is-tools button { min-height: 43px; margin: 3px; border-radius: 9px; }
.is-summary { padding: 18px 4px 10px; color: var(--muted); font-size: .75rem; }
.is-summary span:first-child { float: left; }
.is-summary span:last-child { float: right; }

.is-list { border-top: 1px solid var(--line); }
.is-row { padding: 22px 4px; border-bottom: 1px solid var(--line); }
.is-row-main { float: left; width: calc(100% - 230px); min-width: 0; }
.is-row-main h3 { margin: 9px 0 8px; font-size: 1.25rem; }
.is-row-main p { max-width: 68ch; margin-bottom: 8px; color: var(--muted); line-height: 1.55; }
.is-row-main small { color: var(--muted); }
.is-row-actions { float: right; width: 220px; padding-top: 18px; text-align: right; }
.is-row-actions button { min-height: 36px; margin: 3px; padding: 7px 11px; font-size: .76rem; }
.status-pill { display: inline-block; padding: 4px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .67rem; letter-spacing: .05em; text-transform: uppercase; }
.status-draft { background: #eceff2; color: var(--muted); }
.status-review { background: #fff1d8; color: #8a5a12; }
.is-pager { padding-top: 18px; text-align: right; }
.is-pager button { margin-left: 7px; }

.foundation-empty { padding: clamp(30px, 6vw, 70px); border: 1px dashed var(--line); border-radius: var(--radius); background: var(--paper); text-align: center; }
.foundation-empty h3 { margin-bottom: 10px; font-size: clamp(1.5rem, 4vw, 2.5rem); }
.foundation-empty p { max-width: 56ch; margin: 0 auto 20px; color: var(--muted); line-height: 1.65; }

.detail-card { max-width: 780px; padding: clamp(24px, 5vw, 52px); }
.detail-card h2 { margin-bottom: 18px; font-size: clamp(2rem, 5vw, 4rem); }
.detail-card > p:not(.eyebrow) { color: var(--muted); line-height: 1.7; }
.detail-card dl { margin: 30px 0; border-top: 1px solid var(--line); }
.detail-card dt, .detail-card dd { display: inline-block; width: 50%; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.detail-card dt { color: var(--muted); }
.detail-actions button { margin: 3px; }

.foundation-form { max-width: 720px; padding: clamp(24px, 5vw, 48px); }
.foundation-form h2 { margin-bottom: 24px; font-size: clamp(1.8rem, 4vw, 3rem); }
.foundation-form label { display: block; margin: 0 0 16px; color: var(--muted); font-size: .78rem; }
.foundation-form input, .foundation-form select, .foundation-form textarea { display: block; width: 100%; min-height: 45px; margin-top: 7px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); }
.foundation-form textarea { resize: vertical; }
.foundation-form [aria-invalid="true"] { border-color: var(--warn); }
.form-error { display: block; min-height: 0; padding-top: 5px; color: var(--warn); }
.form-actions { padding-top: 6px; }
.form-actions button { margin: 3px; }
.fine-print { margin: 16px 0 0; color: var(--muted); font-size: .75rem; line-height: 1.5; }

.auth-shell { max-width: 920px; margin: 0 auto; padding: clamp(18px, 4vw, 38px); }
.auth-links { margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.auth-links button { min-height: 36px; margin: 3px; padding: 7px 12px; font-size: .75rem; }
.auth-links button.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.auth-option { max-width: 660px; padding: clamp(24px, 5vw, 48px); }
.auth-option p { color: var(--muted); line-height: 1.65; }

.layout-proof { margin: -7px; }
.layout-proof-card { padding: clamp(22px, 4vw, 44px); border: 7px solid var(--surface); background: var(--paper); }
.layout-proof-card > span { color: var(--accent); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.layout-proof-card h3 { margin: 28px 0 12px; font-size: clamp(1.4rem, 3vw, 2.5rem); }
.layout-proof-card p { color: var(--muted); line-height: 1.65; }
.layout-proof-a { min-height: 430px; background: #eef1ff; }
.layout-proof-b { min-height: 170px; }
.layout-proof-c { min-height: 245px; background: #edf7f2; }
.layout-proof-d { min-height: 120px; background: #f1f3f5; }
.nested-proof { margin-top: 32px; padding: 6px; background: rgba(255, 255, 255, .66); }
.nested-proof > span { margin: 1%; padding: 16px; background: var(--surface); color: var(--muted); font-size: .78rem; line-height: 1.5; }

.mock-popup { position: fixed; inset: 0; z-index: 70; padding: max(16px, 4vh) 16px; overflow: auto; background: rgba(15, 22, 31, .48); backdrop-filter: blur(5px); text-align: center; animation: dpv-popup-backdrop .2s ease; }
.mock-popup-frame { display: inline-block; width: min(820px, 100%); max-height: calc(100vh - 32px); border-radius: 12px; overflow: auto; background: linear-gradient(112deg, rgba(231,238,235,.96), rgba(251,252,249,.99) 55%, #fff); box-shadow: 0 25px 80px rgba(20, 28, 38, .2); text-align: left; vertical-align: top; animation: dpv-popup-frame .3s cubic-bezier(.2,.78,.2,1); }
@keyframes dpv-popup-backdrop { from { opacity: 0; } to { opacity: 1; } }
@keyframes dpv-popup-frame { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.mock-popup header { position: sticky; top: 0; z-index: 2; padding: 14px 18px; border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; background: rgba(255, 255, 255, .96); }
.mock-popup header strong { float: left; padding: 8px 0; font-size: .82rem; text-transform: capitalize; }
.mock-popup header button { float: right; padding: 3px 8px; border: 0; background: transparent; font-size: 1.5rem; cursor: pointer; }
.mock-popup header .mock-popup-back { float: left; min-height: 32px; margin: 2px 10px 0 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 0; font-size: .72rem; }
.mock-popup header .mock-popup-back[hidden] { display: none; }

.query-output { max-width: 100%; margin: 0; padding: clamp(18px, 4vw, 38px); overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: #111923; color: #d9e4ef; font: .82rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
.stream-panel { max-width: 1480px; margin: 28px auto 0; padding: 0 clamp(14px, 4vw, 60px) 80px; }
.stream-panel details { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.stream-panel summary { padding: 15px 18px; color: var(--muted); font-size: .78rem; cursor: pointer; }
.stream-log { max-height: 360px; overflow: auto; border-top: 1px solid var(--line); }
.stream-log article { padding: 13px 18px; border-bottom: 1px solid var(--line); }
.stream-log strong, .stream-log span, .stream-log code { display: block; overflow-wrap: anywhere; }
.stream-log strong { font-size: .78rem; }
.stream-log span { margin: 4px 0; color: var(--muted); font-size: .7rem; }
.stream-log code { color: var(--accent); font-size: .7rem; }

:focus-visible { outline: 3px solid rgba(57, 89, 217, .3); outline-offset: 3px; }

@media (max-width: 820px) {
	.site-head-inner { text-align: right; }
	.site-nav { max-width: calc(100% - 65px); }
	.head-action, .canvas-tag { display: none; }
	.pg-head-copy, .pg-actions, .is-row-main, .is-row-actions { float: none; width: 100%; max-width: none; }
	.pg-actions, .is-row-actions { padding: 15px 0 0; text-align: left; }
}

@media (max-width: 520px) {
	.site-nav a { margin: 0 6px; font-size: .73rem; }
	.example-bar { text-align: left; overflow-x: auto; white-space: nowrap; }
	.is-summary span { float: none !important; display: block; margin-bottom: 4px; }
	.layout-proof { margin: 0; }
	.layout-proof-card { border-width: 4px 0; }
	.nested-proof > span { width: 100% !important; margin: 2px 0; }
	.foundation-canvas { padding-right: 10px; padding-left: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* RDC_DPV_BASE_DESIGN_END */