/* Layout-only styles for the living styleguide page (/styleguide). Component look
 * comes from the houseaccount_* stylesheets; this just lays out the gallery. */
.sg { max-width: 960px; margin: 0 auto; padding: var(--ha-space-12) var(--ha-space-6); }
.sg__header { margin-bottom: var(--ha-space-12); }
.sg-section { margin-bottom: var(--ha-space-16); }
.sg-section > h2 { margin-bottom: var(--ha-space-6); }
.sg-subhead { margin: var(--ha-space-8) 0 var(--ha-space-4); }
.sg-row { display: flex; flex-wrap: wrap; gap: var(--ha-space-4); align-items: center; }
.sg-stack { display: flex; flex-direction: column; gap: var(--ha-space-4); }
.sg-grid {
  display: grid; gap: var(--ha-space-6);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.sg-swatches {
  display: grid; gap: var(--ha-space-4);
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.sg-swatch__chip {
  height: 64px; border-radius: var(--ha-radius-md); border: 1px solid var(--ha-border);
}
.sg-swatch__name { margin-top: var(--ha-space-2); }
.sg-spaces { display: flex; flex-direction: column; gap: var(--ha-space-2); }
.sg-space__bar {
  height: 16px; background: var(--ha-blue-accent); border-radius: var(--ha-radius-xs);
}
.sg-radius {
  width: 96px; height: 64px; background: var(--ha-blue-primary-soft);
  border: 1px solid var(--ha-border);
}
.sg-shadow { width: 200px; height: 96px; background: #fff; border-radius: var(--ha-radius-md); }
.sg-icon-cell {
  display: flex; flex-direction: column; align-items: center; gap: var(--ha-space-2);
}
.sg-icons {
  display: grid; gap: var(--ha-space-6);
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}