/* Host wrapper for ConstructionViewer. The viewer's own styles are in
   lib/construction-viewer/construction-viewer.css, linked by the interop script. */
.cv-host { position: relative; width: 100%; min-height: 240px; border-radius: 10px; overflow: hidden; background: #dce1dc; }
.cv-host-canvas { position: absolute; inset: 0; }
.cv-host-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #64716b; font-size: 13px; font-weight: 600; letter-spacing: .02em; pointer-events: none; }

/* Builder demo around the viewer. */
.cvd { --cvd-border: #E5E2DA; --cvd-muted: #6b6760; --cvd-accent: #263d32; display: flex; flex-direction: column; gap: 14px; font-size: 13px; color: #111; }
.cvd *, .cvd *::before, .cvd *::after { box-sizing: border-box; }
.cvd :focus-visible { outline: 3px solid rgb(47 109 88 / 35%); outline-offset: 2px; }
.cvd-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cvd-projects { display: flex; gap: 8px; flex-wrap: wrap; }
.cvd-project { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; border: 1px solid var(--cvd-border); border-radius: 8px; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.cvd-project strong { font-size: 13px; font-weight: 600; }
.cvd-project span { font-size: 11px; color: var(--cvd-muted); }
.cvd-project:hover { border-color: #b9b4aa; }
.cvd-project.is-active { border-color: var(--cvd-accent); box-shadow: inset 0 0 0 1px var(--cvd-accent); }
.cvd-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cvd-segment { display: inline-flex; padding: 2px; border: 1px solid var(--cvd-border); border-radius: 8px; background: #fff; }
.cvd-segment button { min-height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: var(--cvd-muted); cursor: pointer; }
.cvd-segment button.is-active { background: var(--cvd-accent); color: #fff; }
.cvd-select { min-height: 34px; max-width: 280px; padding: 0 8px; border: 1px solid var(--cvd-border); border-radius: 8px; background: #fff; font: inherit; font-size: 12px; }
.cvd-buttons { display: flex; gap: 6px; }
.cvd-buttons button { min-height: 34px; padding: 0 12px; border: 1px solid var(--cvd-border); border-radius: 8px; background: #fff; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.cvd-buttons button:hover:not(:disabled) { border-color: #b9b4aa; }
.cvd-buttons button:disabled { opacity: .45; cursor: default; }
.cvd-footer { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--cvd-muted); }
.cvd-footer p { margin: 0; max-width: 620px; line-height: 1.55; }
.cvd-footer dl { display: flex; gap: 18px; margin: 0; }
.cvd-footer dt { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.cvd-footer dd { margin: 2px 0 0; color: #111; font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; }
.cvd-error { flex-basis: 100%; padding: 10px 12px; border-radius: 6px; background: #fef2f2; color: #b91c1c; }

/* Inside a catalog card the preview scaler fixes the box; fill it. */
.pb-preview-scaler > .cv-host { height: 100% !important; border-radius: 0; }

@media (max-width: 700px) {
    .cvd-controls, .cvd-buttons { width: 100%; }
    .cvd-buttons button { flex: 1; }
    .cvd-select { max-width: none; flex: 1; }
}