/* Exterior Palette Studio — overlay picker + palette mode + coordination score */
.exterior-palette-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: grid; place-items: center; padding: clamp(16px, 4vw, 48px);
  background: rgba(6, 27, 24, .72); backdrop-filter: blur(4px);
}
.exterior-palette-overlay[hidden] { display: none; }
body.exterior-palette-overlay-open { overflow: hidden; }
.exterior-palette-overlay-card {
  width: min(1080px, 100%); max-height: 90vh; overflow: auto;
  background: #fff; border: 1px solid #bdcac2; border-radius: 16px;
  padding: clamp(20px, 3vw, 32px); display: grid; gap: 20px;
  box-shadow: 0 24px 60px -20px rgba(8, 29, 18, .4);
}
.exterior-palette-eyebrow { margin: 0; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #0b6a3b; }
.exterior-palette-overlay-head h2 { margin: 6px 0 8px; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.1; color: #062b18; }
.exterior-palette-overlay-copy { margin: 0; color: #4f5c55; line-height: 1.5; max-width: 62ch; }
.exterior-palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.exterior-palette-card {
  display: grid; gap: 10px; text-align: left; cursor: pointer;
  border: 1px solid #bdcac2; border-radius: 12px; background: #f7faf8; padding: 10px;
}
.exterior-palette-card:hover { border-color: #0b6a3b; box-shadow: 0 0 0 3px rgba(11, 106, 59, .15); }
.exterior-palette-card-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.exterior-palette-card-swatch-cell { display: grid; gap: 3px; min-width: 0; }
.exterior-palette-card-swatch-cell .exterior-palette-swatch { height: 26px; border-radius: 6px; flex: none; }
.exterior-palette-card-swatch-cell small { font-size: .62rem; color: #5a675e; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exterior-palette-swatch { flex: 1 1 0; background: var(--c, #eee); }
.exterior-palette-card-copy { display: grid; gap: 2px; }
.exterior-palette-card-copy strong { color: #062b18; font-size: .95rem; }
.exterior-palette-card-copy small { color: #5a675e; font-size: .8rem; }
.exterior-palette-overlay-foot { display: flex; justify-content: flex-end; }

/* Palette mode bar (inside the supplier browser) */
.exterior-palette-mode { display: grid; gap: 12px; border: 1px solid #bdcac2; border-radius: 12px; background: #f7faf8; padding: 12px 14px; }
.exterior-palette-mode-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.exterior-palette-mode-toggle, .exterior-palette-change {
  border: 1px solid #9daf9f; background: #fff; border-radius: 999px;
  padding: 9px 14px; font-weight: 800; color: #062b18; cursor: pointer; font-size: .86rem;
}
.exterior-palette-mode-toggle.is-active { background: #06351d; color: #fff; border-color: #06351d; }
.exterior-palette-change { background: #f7faf8; }
.exterior-palette-strip { display: grid; gap: 10px; }
.exterior-palette-strip-label { font-weight: 800; color: #062b18; font-size: 1rem; }
.exterior-palette-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.exterior-palette-legend-row { display: flex; align-items: center; gap: 10px; border: 1px solid #d8e1dc; border-radius: 10px; background: #fff; padding: 8px 10px; }
.exterior-palette-legend-swatch { width: 40px; height: 40px; border-radius: 8px; background: var(--c, #eee); border: 1px solid rgba(0,0,0,.1); flex: none; }
.exterior-palette-legend-meta { display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; }
.exterior-palette-legend-meta strong { color: #062b18; font-size: .84rem; }
.exterior-palette-legend-meta small { color: #5a675e; font-size: .76rem; }
.exterior-palette-legend-hex { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; color: #4f5c55; background: #f7faf8; border: 1px solid #e3ece5; border-radius: 6px; padding: 3px 6px; white-space: nowrap; }

/* Coordination score */
.exterior-palette-score { display: grid; gap: 6px; }
.exterior-palette-score-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.exterior-palette-score-head span { color: #4f5c55; font-weight: 800; }
.exterior-palette-score-head strong { color: #062b18; font-size: 1.05rem; }
.exterior-palette-score-bar { height: 10px; border-radius: 999px; background: #e3ece5; overflow: hidden; }
.exterior-palette-score-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: #0b6a3b; transition: width .4s cubic-bezier(.22, 1, .36, 1); }
.exterior-palette-score p { margin: 0; color: #4f5c55; font-size: .86rem; font-weight: 700; }
.exterior-palette-score[data-verdict="harmony"] .exterior-palette-score-bar span { background: #0b6a3b; }
.exterior-palette-score[data-verdict="harmony"] p { color: #0b6a3b; }
.exterior-palette-score[data-verdict="caution"] .exterior-palette-score-bar span { background: #b07a4f; }
.exterior-palette-score[data-verdict="caution"] p { color: #9b5d00; }
.exterior-palette-score[data-verdict="clash"] .exterior-palette-score-bar span { background: #a33a2b; }
.exterior-palette-score[data-verdict="clash"] p { color: #a33a2b; }

@media (max-width: 700px) {
  .exterior-palette-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .exterior-palette-card-swatches { height: 32px; }
}