/* COVER — scoped to .rww-cover so the whole toy can be dropped into any page. */

.rww-cover .toy-stage {
  background: #08070c;
  display: grid;
  place-items: center;
  padding: 22px;
  min-height: 340px;
}
.rww-cover .cover-frame {
  width: min(100%, 560px);
  aspect-ratio: 1;
  box-shadow: 0 22px 60px rgba(0,0,0,.6);
  border-radius: 2px;
  overflow: hidden;
}
.rww-cover canvas { display: block; width: 100%; height: 100%; }

/* The panel is long — group headers keep it navigable. */
.rww-cover .grp {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.rww-cover .grp:first-child { border-top: 0; padding-top: 0; }
.rww-cover .grp > h4 {
  font-family: var(--font-ui);
  font-weight: 600; font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--text-faint);
  margin: 0;
}

/* Colour pickers */
.rww-cover .colours { display: flex; gap: 8px; }
.rww-cover .colours.one { max-width: 132px; }
.rww-cover .colour {
  flex: 1; display: flex; flex-direction: column; gap: 5px; align-items: center;
}
.rww-cover .colour span {
  font-family: var(--font-ui); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-faint);
}
.rww-cover input[type="color"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 34px; padding: 0; cursor: pointer;
  background: none; border: 1px solid var(--line); border-radius: 3px;
}
.rww-cover input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
.rww-cover input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 2px; }
.rww-cover input[type="color"]::-moz-color-swatch { border: 0; border-radius: 2px; }

.rww-cover .presets { display: flex; flex-wrap: wrap; gap: 7px; }

/* Photo drop zone */
.rww-cover .drop {
  border: 1px dashed rgba(255,255,255,.26);
  border-radius: 3px;
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-faint);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.rww-cover .drop:hover,
.rww-cover .drop.over { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.06); color: var(--text); }
.rww-cover .drop b { color: var(--text); font-weight: 600; }
.rww-cover .drop input { display: none; }

.rww-cover .togglerow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rww-cover .seg.small button { font-size: 10.5px; padding: 8px 6px; letter-spacing: .08em; }

/* The control panel is much taller than the artwork, so the preview sticks:
   you can reach the export settings at the bottom and still see what you are
   changing. */
@media (min-width: 901px) {
  .rww-cover .toy-shell > div:first-child {
    position: sticky;
    top: calc(var(--bar-h) + 18px);
  }
}

@media (max-width: 900px) {
  .rww-cover .cover-frame { width: min(100%, 460px); }
}