/* The 3D house with colour swatches: the public Roof colors page and the
   Colors tab on the customer page. Uses the page palette tokens. */
.viz { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr); gap: 16px; align-items: start; }
.viz-panel { display: grid; gap: 14px; }
.viz-group h3 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
.viz-group label { font-size: .85rem; margin-bottom: 8px; }
.viz-group select { padding: 9px; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: 8px; }
.sw { display: grid; gap: 5px; justify-items: center; padding: 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); color: var(--dim); cursor: pointer; font: inherit; }
.sw span { width: 100%; height: 30px; border-radius: 4px; background: var(--c); border: 1px solid rgba(255,255,255,.12); }
.sw small { font-size: .7rem; line-height: 1.2; text-align: center; }
.sw[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--ink); }
@media (max-width: 760px) { .viz { grid-template-columns: 1fr; } }

.viz #house, .viz .model { min-height: 300px; }