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

/* how the coasters are shown: a second toolbar at the bottom of the viewer */
.coaster-tool .viewer-toolbar-bottom { top: auto; bottom: 12px; justify-content: center; }
.coaster-tool .viewer-toolbar .seg button { white-space: nowrap; }

/* number of coasters: six equal buttons over the full width */
#ncoasters { display: flex; width: 100%; }
#ncoasters button { flex: 1 1 0; min-width: 0; padding-left: 0; padding-right: 0; }

/* coaster picker: one button per coaster with a small preview of its photo */
.cs-slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.cs-slots[hidden] { display: none; }
.cs-slot {
  position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  font: inherit; color: var(--muted);
}
.cs-slot canvas { display: block; width: 100%; height: 100%; }
.cs-slot:not(.has-photo) canvas { visibility: hidden; }
.cs-slot span {
  position: absolute; left: 3px; top: 3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  display: grid; place-items: center; font-size: .75rem; font-weight: 800; line-height: 1;
  background: rgba(255, 255, 255, .92); color: var(--ink);
}
.cs-slot:not(.has-photo) span { left: 50%; top: 50%; transform: translate(-50%, -50%); background: none; color: var(--muted); font-size: .95rem; }
.cs-slot:hover { border-color: #c5cbd2; }
.cs-slot[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); }
.cs-slot[aria-pressed="true"] span { background: var(--accent); color: #fff; }
.cs-slot[aria-pressed="true"]:not(.has-photo) span { background: none; color: var(--accent); }

.cs-chip-btns { display: flex; gap: 12px; flex: none; }
#file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-modes label { padding-left: 4px; padding-right: 4px; }
.cs-hint { margin: 10px 0 0; }

/* the crop of a single coaster is square: keep it from filling a tall phone screen */
#crop-wrap canvas { width: auto; max-width: 100%; max-height: min(460px, 62vh); margin: 0 auto; display: block; }

.cs-note { margin: 0 0 14px; }

/* warning in the dark download panel */
.coaster-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;
}

#block-holder .check { margin: 0; }