/* A version's pictures (src/pictures.rs; the 20 Oct handoff's open item, compose, the customer's
   card): the main one large, a strip of squares, and the viewer full screen. Every picture sits on
   the lattice, contained whole in its box. Square, as everything cut from the shell (the corners
   rule, tokens.css). Every value is a token. */

/* ---- the main picture ---- */

.main-picture {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--picture-main-height);
  padding: var(--space-3);
  box-sizing: border-box;
  border: var(--hairline) solid var(--color-line);
  background-color: var(--color-paper-lattice);
  background-image:
    linear-gradient(var(--color-rule) var(--hairline), transparent var(--hairline)),
    linear-gradient(90deg, var(--color-rule) var(--hairline), transparent var(--hairline));
  background-size: var(--lattice-pitch) var(--lattice-pitch);
  color: var(--color-ink);
  font: inherit;
}

button.main-picture {
  cursor: zoom-in;
}

button.main-picture:focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: calc(-1 * var(--focus-width));
}

.main-picture-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.main-picture-none {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.main-picture-drawing,
.picture-tile-drawing .picture-square {
  background-image: repeating-linear-gradient(
    45deg,
    var(--color-line-panel) 0 var(--space-2),
    var(--color-shell) var(--space-2) var(--space-4)
  );
}

.main-picture-caption {
  position: absolute;
  bottom: var(--space-1);
  left: var(--space-2);
  right: var(--space-2);
  display: flex;
  gap: var(--space-1);
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-mono-chip);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-ink);
  text-align: left;
}

.main-picture-count {
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-2);
  padding: 1px var(--space-2);
  border: var(--hairline) solid var(--color-field-line);
  background: var(--color-shell);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
}

/* A mono word in a hairline box beside a caption: "main", "carried from v3". */
.picture-tag {
  padding: 0 var(--space-1);
  border: var(--hairline) solid var(--color-ink);
  background: var(--color-shell);
  font-family: var(--font-mono);
  font-size: var(--text-mono-chip);
  letter-spacing: var(--tracking-chip);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---- the strip ---- */

.picture-strip {
  --picture-square: var(--picture-strip-medium);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: flex-start;
}

.picture-strip-small {
  --picture-square: var(--picture-strip-small);
  gap: var(--space-1);
}

.picture-strip-large {
  --picture-square: var(--picture-strip-large);
}

.picture-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: var(--picture-square);
}

.picture-frame {
  position: relative;
}

.picture-square {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--picture-square);
  height: var(--picture-square);
  padding: var(--space-1);
  box-sizing: border-box;
  border: var(--hairline) solid var(--color-field-line);
  background: var(--color-paper-lattice);
  color: var(--color-ink);
  font: inherit;
}

button.picture-square {
  cursor: pointer;
}

.picture-tile-main .picture-square,
.picture-tile-current .picture-square {
  border: var(--rule-tab) solid var(--color-ink);
}

.picture-tile-out .picture-square {
  border-style: dashed;
  opacity: 0.45;
}

.picture-tile-dragging {
  opacity: 0.5;
}

.picture-strip-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.picture-strip-none {
  overflow: hidden;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-chip);
  text-align: center;
  text-overflow: ellipsis;
}

/* Its place, the order the customer is shown them in, at the top left. */
.picture-place {
  position: absolute;
  top: var(--space-1);
  left: var(--space-1);
  padding: 0 var(--space-1);
  background: var(--color-ink);
  color: var(--color-shell);
  font-family: var(--font-mono);
  font-size: var(--text-mono-chip);
  font-weight: var(--weight-display);
}

/* The drag handle, at the top right, which the arrow keys move too. */
.picture-handle {
  position: absolute;
  top: 1px;
  right: var(--space-1);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  cursor: grab;
}

.picture-handle:focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
}

.picture-caption {
  color: var(--color-muted);
  font-size: var(--text-meta);
  line-height: 1.3;
}

.picture-caption .picture-tag {
  margin-left: var(--space-1);
}

.picture-tick {
  margin: 0 var(--space-1) 0 0;
  vertical-align: middle;
}

/* "+2": the pictures past the limit. */
.picture-more {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--picture-square);
  border: var(--hairline) solid var(--color-field-line);
  background: var(--color-line-panel);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  font-weight: var(--weight-display);
}

button.picture-more {
  cursor: pointer;
}

/* "+ Picture": a dashed square that adds one. */
.picture-add {
  align-items: center;
  justify-content: center;
  height: var(--picture-square);
  gap: 0;
  border: var(--hairline) dashed var(--color-line-hatch);
  background: var(--color-shell);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-meta);
  cursor: pointer;
}

.picture-add b {
  font-size: var(--text-display-5);
  line-height: 1;
}

/* ---- full screen ---- */

.picture-viewer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--picture-viewer-height);
  background: var(--color-paper-lattice);
}

.picture-viewer-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}