/* Artwork: square preview cards in the spec sheet's Artwork panel (one row,
 * scrolling sideways) and the Artwork library (a grid). */
@layer reset, tokens, base, layout, components, utilities, print;

@layer components {
  .artwork-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; margin-bottom: var(--space-3); }
  .artwork-search { flex: 0 1 18rem; min-width: 10rem; }
  .toggle-pill { display: inline-flex; align-items: center; gap: var(--space-1); cursor: pointer; }
  .toggle-pill[aria-pressed="true"], .toggle-pill:has(input:checked) { background: var(--action); color: var(--action-ink); border-color: var(--action); }
  .toggle-pill input { margin: 0; }

  .artwork-add { position: relative; }
  .artwork-add > summary { list-style: none; }
  .artwork-add > summary::-webkit-details-marker { display: none; }
  .artwork-add[open] { flex-basis: 100%; }
  .artwork-add-form { margin-top: var(--space-2); }

  .artwork-strip { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-2);
                   scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
  .artwork-strip .artwork-card { flex: 0 0 10rem; scroll-snap-align: start; }
  .artwork-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-4); }

  .artwork-card { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
  .artwork-card[draggable="true"] { cursor: grab; }
  .artwork-card.is-dragging { opacity: .5; }
  .artwork-thumb {
    aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius-md);
    border: 1px solid var(--line);
    /* A light checkerboard, so transparent artwork shows as transparent. */
    background: repeating-conic-gradient(var(--field) 0 25%, var(--glass-strong) 0 50%) 0 0 / 1rem 1rem;
  }
  .artwork-thumb img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-2); }
  .artwork-format { font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--muted); }
  .artwork-name { margin: 0; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .artwork-notes { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
  .artwork-notes:empty { display: none; }
  .artwork-warning { font-size: var(--text-xs); color: var(--warning); }
  .artwork-uses { margin: 0; display: flex; flex-direction: column; gap: .1rem; }

  .place-on { position: relative; }
  .place-on > summary { list-style: none; font-size: var(--text-sm); padding-block: .3rem; text-align: center; }
  .place-on > summary::-webkit-details-marker { display: none; }
  .place-on-menu { display: flex; gap: var(--space-2); margin-top: var(--space-1); }
  .place-on-menu form { flex: 1; display: flex; }
  .place-on-menu button { flex: 1; font-size: var(--text-sm); padding-block: .3rem; }

  /* The garment drawing while artwork is dragged over it (desktops only). */
  .placement-svg.is-drop-target { outline: 2px dashed var(--action); outline-offset: 4px; border-radius: var(--radius-md); }
  .artwork-hint { margin: var(--space-2) 0 0; }
}