/* Photo wall clock maker (photo-clock.html): only what style.css doesn't have yet */

/* hour markers: five choices in one row */
.marker-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 0; }
@media (max-width: 420px) { .marker-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .marker-grid .shape-opt label { font-size: .64rem; padding-left: 2px; padding-right: 2px; } }

/* the markers' filament: chip, choice, custom colour and the contrast button on one line */
.mark-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mark-row .chip {
  width: 34px; height: 34px; border-radius: 50%; background: var(--c); flex: none;
  border: 1px solid rgba(16, 20, 24, .18); box-shadow: inset 0 -6px 10px rgba(0, 0, 0, .12);
}
.mark-row select { flex: 1 1 140px; min-width: 0; width: auto; padding: 8px 10px; }
.mark-row input[type=color] { width: 40px; height: 38px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }

/* what to buy */
.buy-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.buy-list li { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface); font-size: .88rem; line-height: 1.45; }
.buy-list li b { font-size: .9rem; }
.buy-list li span { color: var(--muted); }
#block-movement .check { margin: 0; }
.assembly { margin: 8px 0 0; padding-left: 20px; }
.assembly li { margin: 4px 0; }

/* warning in the dark download panel */
.clock-warn {
  margin: 0 0 14px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: rgba(255, 210, 122, .14); color: #ffd27a; font-size: .86rem; line-height: 1.45;
}

/* the crop view of the clock face is square */
.clock-tool .block.disabled .crop-wrap { aspect-ratio: 1; }