:root {
  color-scheme: light;
  --bg: #f4f3f0;
  --panel-bg: #ffffff;
  --border: #e2e0da;
  --text: #1c1b19;
  --text-dim: #6b6862;
  --accent: #1c1b19;
  --swatch-size: 30px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  height: 100%;
  overflow: hidden;
}

#app {
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: 100vh;
}

#viewer-container {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

#viewer-canvas {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  touch-action: none;
}

#viewer-overlay {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 14px;
}

#viewer-hint {
  font-size: 12px;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.7);
  padding: 4px 10px;
  border-radius: 999px;
  pointer-events: none;
  white-space: nowrap;
}

#view-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

#view-presets button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
}

#view-presets button:hover {
  background: #ffffff;
  color: var(--text);
  border-color: var(--accent);
}

#controls-panel {
  flex: 0 0 260px;
  background: var(--panel-bg);
  border-left: 1px solid var(--border);
  padding: 20px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.part-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.part-group h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

.swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.swatch {
  position: relative;
  width: var(--swatch-size);
  height: var(--swatch-size);
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  padding: 0;
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.swatch:hover {
  transform: scale(1.08);
}

/* Single shared tooltip (src/colorPicker.js positions it with fixed
   coordinates per-swatch on hover/focus - see showTooltip). Fixed rather
   than anchored inside the swatch so it can't be clipped by the scrollable
   #controls-panel, and so it can flip below + clamp horizontally near the
   panel's edges. */
.swatch-tooltip {
  position: fixed;
  background: var(--text);
  color: var(--panel-bg);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  padding: 5px 8px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 10;
}

.swatch-tooltip::after {
  content: "";
  position: absolute;
  left: var(--arrow-offset, 50%);
  transform: translateX(-50%);
  border: 4px solid transparent;
}

/* Default: tooltip above the swatch, arrow points down from its bottom. */
.swatch-tooltip::after {
  top: 100%;
  border-top-color: var(--text);
}

/* Flipped: tooltip below the swatch, arrow points up from its top. */
.swatch-tooltip.arrow-below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--text);
}

.swatch-tooltip.visible {
  opacity: 1;
}

.swatch.selected {
  border-color: var(--accent);
}

#shape-select {
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-bg);
  color: var(--text);
}

#share-btn {
  margin-top: auto;
  border: 1px solid var(--border);
  background: var(--panel-bg);
  color: var(--text);
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
}

#share-btn:hover {
  background: var(--bg);
}

#share-btn.copied {
  border-color: var(--accent);
}

@media (max-width: 640px) {
  /* Below this width the viewer and controls stack instead of sitting
     side by side. The desktop layout locks everything to exactly one
     viewport height with the controls panel scrolling internally - fine
     when the panel is a narrow sidebar, but on a phone (or a short
     Squarespace embed) that meant the color panel was capped at an
     arbitrary height and forced into its own inner scrollbar even when
     there was plenty of room below it. Here the panel instead grows to
     fit all its content, and the page itself scrolls - so it expands to
     use whatever space is actually available instead of clipping. */
  html, body {
    height: auto;
    overflow: visible;
  }

  #app {
    height: auto;
    min-height: 100vh;
    flex-direction: column;
  }

  #viewer-container {
    /* A fixed pixel height rather than a vh-based one - vh is relative to
       the iframe's own height in Squarespace, which creates a circular
       dependency (the "right" iframe height depends on the content's
       height, which depended on the iframe's height). Fixed content height
       instead, so there's one true number to plug into the Squarespace
       embed's height field - see README for the current total. */
    flex: 0 0 auto;
    height: 340px;
  }

  #controls-panel {
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
    border-left: none;
    border-top: 1px solid var(--border);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  #share-btn {
    margin-top: 0;
    flex: 1 1 100%;
  }
}