/* Component reference page only (internal). Token-bound. */
.casa-ref-swatches { list-style: none; margin: 0 0 var(--size-48); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--size-220), 1fr)); gap: var(--size-12); }
.casa-ref-swatch { display: flex; align-items: center; gap: var(--size-12); font-size: var(--text-small); }
.casa-ref-chip { width: var(--size-48); height: var(--size-48); flex: none; border-radius: var(--radius-8); border: var(--size-1) solid var(--color-sand-deep); }
.casa-ref-type { display: grid; gap: var(--size-8); padding: var(--size-32); background: var(--color-surface); border-radius: var(--radius-16); }
.casa-ref-hero { margin: 0; font: var(--font-weight-regular) var(--size-65)/var(--size-70) var(--font-display); letter-spacing: var(--tracking-tight); }
.casa-ref-section { margin-top: var(--size-64); padding-top: var(--size-48); border-top: var(--size-1) solid var(--color-sand-deep); }
.casa-ref-row { display: flex; flex-wrap: wrap; gap: var(--size-16); align-items: center; padding: var(--size-24); border-radius: var(--radius-16); background: var(--color-surface); }
.casa-ref-row.is-dark { background: var(--color-dark); }
.casa-ref-label { width: 100%; margin: 0; font-size: var(--text-small); color: var(--color-text-muted); }
.casa-ref-row.is-dark .casa-ref-label { color: var(--color-on-dark-muted); }
.casa-ref-section.casa-container { padding-top: var(--size-48); margin-bottom: var(--size-24); }
.casa-ref-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--size-32); align-items: start; }
.casa-ref-phone { max-width: var(--size-390); border: var(--size-1) solid var(--color-sand-deep); border-radius: var(--radius-12); overflow: hidden; }
.casa-ref-mpanel .casa-mpanel { position: static; max-height: none; box-shadow: none; display: block !important; }
.casa-ref-static .casa-consent { position: static; width: auto; }
.casa-ref-sticky .casa-sticky { display: block; position: static; }
.casa-ref-gap { margin-bottom: var(--size-16); }
.casa-ref-gap-top { margin-top: var(--size-32); }
.casa-ref-stack { display: grid; gap: var(--size-24); }
.casa-ref-narrow { max-width: var(--size-760); }
.casa-ref-dd { min-height: var(--size-300); align-items: flex-start; }
/* simulated states for the reference rows */
.casa-btn.is-hover { background: var(--button-bg-hover); }
.casa-btn.is-hover .casa-arr { background: var(--button-arrow-bg-hover); }
.casa-btn--soft.is-hover { background: var(--button-soft-arrow-bg); }
.casa-btn--soft.is-hover .casa-arr { background: var(--button-soft-arrow-bg-hover); }
.casa-btn.is-focus, .casa-input.is-focus { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.is-dark .casa-btn.is-focus { outline-color: var(--color-focus-on-dark); }
.casa-btn.is-active { background: var(--color-rust-darker); }
.casa-btn--soft.is-active { background: var(--button-soft-arrow-bg-hover); }
.casa-link.is-hover { color: var(--color-primary-hover); }
.casa-dd-link.is-hover { background: var(--color-bg); }
.casa-input.is-focus { background: var(--color-surface); border-bottom-color: var(--color-text); }
.casa-input:disabled { opacity: 0.6; cursor: not-allowed; }
.casa-ref-chip--linen { background: var(--color-linen); }
.casa-ref-chip--ivory { background: var(--color-ivory); }
.casa-ref-chip--white { background: var(--color-white); }
.casa-ref-chip--sand { background: var(--color-sand); }
.casa-ref-chip--sand-deep { background: var(--color-sand-deep); }
.casa-ref-chip--walnut { background: var(--color-walnut); }
.casa-ref-chip--walnut-raised { background: var(--color-walnut-raised); }
.casa-ref-chip--walnut-soft { background: var(--color-walnut-soft); }
.casa-ref-chip--rust { background: var(--color-rust); }
.casa-ref-chip--rust-dark { background: var(--color-rust-dark); }
.casa-ref-chip--rust-darker { background: var(--color-rust-darker); }
.casa-ref-chip--brown { background: var(--color-brown); }
.casa-ref-chip--brown-dark { background: var(--color-brown-dark); }
.casa-ref-chip--gold { background: var(--color-gold); }
.casa-ref-chip--gold-light { background: var(--color-gold-light); }
.casa-ref-chip--ink { background: var(--color-ink); }
.casa-ref-chip--ink-muted { background: var(--color-ink-muted); }
.casa-ref-chip--taupe { background: var(--color-taupe); }
.casa-ref-chip--red { background: var(--color-red); }
.casa-ref-chip--red-soft { background: var(--color-red-soft); }
.casa-ref-chip--blue { background: var(--color-blue); }
.casa-ref-chip--blue-soft { background: var(--color-blue-soft); }
@media (max-width: 767px) { .casa-ref-two { grid-template-columns: minmax(0, 1fr); } }