/* Settings → Virtual jock → Station imaging (1.89 N152–N154): the pieces the DJs
   make. Built from the Settings page's rows and panels; these are only the parts
   it has no class for — a message card, a piece row, the kind chips. Sizes and
   colours in one place, the way --ph-* are for the Phone tab. */
.img {
  --img-gap: 10px;
  --img-row-pad: 10px 12px;
  --img-greeter: #f0b13b;
  --img-promo: #58c39a;
  --img-psa: #6fa8ff;
  --img-bit: #d98cf0;
}
.img [hidden] { display: none !important; }
.img-count { margin-left: 8px; white-space: nowrap; }
.img-msgs { gap: var(--img-gap); }
.img-msg { display: grid; gap: 8px; padding: var(--img-row-pad); border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-2); }
.img-msg-top { gap: 8px 10px; align-items: center; }
.img-msg-top input.input { flex: 1 1 200px; min-width: 0; }
.img-msg-top select.input { flex: 0 0 auto; width: auto; }
.img-line { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.img-say { width: 100%; min-height: 4.2em; resize: vertical; line-height: 1.45; }
.img-pieces { gap: 6px; }
.img-piece { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: var(--img-row-pad);
  border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-2); opacity: .7; }
.img-piece.on { opacity: 1; }
.img-piece-b { display: grid; gap: 3px; min-width: 0; }
.img-piece-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.img-script { color: var(--text-2); line-height: 1.45; overflow-wrap: anywhere; }
.img-kind { font-size: 11px; padding: 1px 8px; }
.img-kind[data-kind="greeter"] { color: var(--img-greeter); border-color: color-mix(in srgb, var(--img-greeter) 40%, transparent); }
.img-kind[data-kind="promo"] { color: var(--img-promo); border-color: color-mix(in srgb, var(--img-promo) 40%, transparent); }
.img-kind[data-kind="psa"] { color: var(--img-psa); border-color: color-mix(in srgb, var(--img-psa) 40%, transparent); }
.img-kind[data-kind="bit"] { color: var(--img-bit); border-color: color-mix(in srgb, var(--img-bit) 40%, transparent); }
@media (max-width: 520px) {
  .img-piece { grid-template-columns: auto minmax(0, 1fr); }
  .img-piece > .btn:last-child { grid-column: 1 / -1; justify-self: end; }
  .img-count { display: block; margin: 4px 0 0; }
}