/* Photo night light maker (night-light.html): only what style.css doesn't have already. */

/* side picker: one button per side with a small preview of its photo */
.nl-sides { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.nl-sides[hidden] { display: none; }
.nl-side {
  position: relative; display: block; width: 100%; 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);
}
.nl-side canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.nl-side:not(.has-photo) canvas { visibility: hidden; }
.nl-side span {
  position: absolute; left: 4px; top: 4px; 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);
}
.nl-side:not(.has-photo) span { left: 50%; top: 50%; transform: translate(-50%, -50%); background: none; color: var(--muted); font-size: .95rem; }
.nl-side:hover { border-color: #c5cbd2; }
.nl-side[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); }
.nl-side[aria-pressed="true"] span { background: var(--accent); color: #fff; }
.nl-side[aria-pressed="true"]:not(.has-photo) span { background: none; color: var(--accent); }

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

/* tall, narrow crops (hexagon sides) shouldn't fill the whole screen */
#crop-wrap canvas { width: auto; max-width: 100%; max-height: min(440px, 60vh); margin: 0 auto; }

/* lighting buttons on the left, view buttons on the right; on small phones the view buttons
   move to the bottom of the preview so they never cover the model */
.viewer-toolbar .seg button { white-space: nowrap; }
.nl-view-bar { justify-content: flex-end; left: auto; }
@media (max-width: 479px) { .nl-view-bar { top: auto; bottom: 12px; left: 12px; justify-content: center; } }