/* generator.css — minimal, functional styling (layout, control sizing, and the
   checkerboard backdrops that reveal the mark's transparency). Full visual design
   is still a later concern. */

:root {
  /* faint image-viewer checkerboard, shown behind the mark wherever it's previewed
     so transparent areas read as transparent. Squares are off-white (not pure #fff)
     so an opaque white export background still stands out as brighter than the
     backdrop — transparent and white-bg stay visually distinct. */
  --checker: conic-gradient(#e9e9e9 0 25%, #f8f8f8 0 50%, #e9e9e9 0 75%, #f8f8f8 0) 0 0 / 16px 16px;
}

body {
  font-family: 'Libre Franklin', 'Helvetica Neue', Arial, system-ui, sans-serif;
  line-height: 1.4;
  max-width: 48rem;
  margin: 1rem auto;
  padding: 0 1rem;
  background: #F2F2F2;
}

/* Fixed preview viewport: reserves a constant 360x240 box so changing bar count /
   aspect never resizes it — the controls below stay put. app.js sizes the SVG to
   contain-fit this box, so the element box matches the artwork exactly and the
   checkerboard (painted on the SVG itself) covers only the exported area — no frame. */
#preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 360px;
  height: 240px;
}
#art { display: contents; }
#art svg { background: var(--checker); display: block; }

#chips {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  margin: 1rem 0;
}
#chips figure { margin: 0; text-align: center; }
#chips figcaption { font-size: 0.75rem; color: #666; }
#chips .chip { display: inline-block; background: var(--checker); }

fieldset { margin: 1rem 0; position: relative; }

/* 1/3-scale "Mini-preview" pinned in the top-right of a control box */
.mini { position: absolute; top: 0.5rem; right: 0.75rem; margin: 0; text-align: center; }
.mini-art { display: flex; align-items: center; justify-content: center; width: 120px; height: 80px; line-height: 0; }
.mini-art svg { background: var(--checker); display: block; }
.mini figcaption { font-size: 0.7rem; color: #666; }

/* each star is a small card of three labelled sliders + remove */
#stars-list { list-style: none; padding: 0; margin: 0.5rem 0; }
#stars-list li { border: 1px solid #ddd; border-radius: 4px; padding: 0.5rem 0.75rem; margin-bottom: 0.5rem; max-width: 24rem; }
#stars-list label { display: flex; align-items: center; gap: 0.5rem; }
#stars-list label span { flex: 0 0 8rem; white-space: nowrap; }   /* fixed label column so the sliders align */
#stars-list label input[type="range"] { flex: 1; min-width: 0; }
#stars-list output { min-width: 2.5ch; text-align: right; font-variant-numeric: tabular-nums; }
#stars-list button { margin-top: 0.25rem; }

.swatches { display: inline-flex; gap: 4px; vertical-align: middle; margin-left: 0.5rem; }
.swatch {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
}