/* Add / edit item dialog: the online product lookup panel and photo picker. */
.lookup {
   border: 1px solid var(--line);
   border-radius: 8px;
   background: var(--surface-2);
   padding: 12px;
   display: flex;
   flex-direction: column;
   gap: 10px;
   min-width: 0;
}
.lookup-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   flex-wrap: wrap;
}
.lookup-head .help {
   flex: 1 1 240px;
}
.lookup-head .help.bad {
   color: var(--bad);
}
.lookup-head .help.good {
   color: var(--ok);
}
.lookup-results {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 6px;
   max-height: 260px;
   overflow-y: auto;
}
.lookup-results li {
   display: grid;
   grid-template-columns: 48px minmax(0, 1fr) auto;
   gap: 10px;
   align-items: center;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 6px;
   padding: 6px 8px;
}
.lookup-results .lr-img {
   width: 48px;
   height: 48px;
   border-radius: 4px;
   background: var(--photo-bg);
   border: 1px solid var(--line);
   display: grid;
   place-items: center;
   overflow: hidden;
   color: var(--muted);
}
.lookup-results .lr-img img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}
.lookup-results .lr-title {
   font-weight: 600;
   font-size: 13px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}
.lookup-results .lr-meta {
   font-size: 12px;
   color: var(--muted);
   font-family: var(--font-mono);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.photo-pick {
   display: flex;
   flex-direction: column;
   gap: 6px;
}
.photo-pick-label {
   font-size: 12px;
   font-weight: 600;
   color: var(--muted);
}
.photo-options {
   display: flex;
   gap: 8px;
   overflow-x: auto;
   padding-bottom: 2px;
}
.photo-opt {
   flex: none;
   width: 76px;
   height: 76px;
   border-radius: 6px;
   border: 2px solid var(--line);
   background: var(--photo-bg);
   padding: 3px;
   cursor: pointer;
   display: grid;
   place-items: center;
   color: var(--muted);
   font-size: 11px;
   font-weight: 600;
   text-align: center;
}
.photo-opt img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}
.photo-opt[aria-checked="true"] {
   border-color: var(--accent);
   box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Flash fields the lookup just filled in */
.field input.filled,
.field select.filled {
   animation: filled 1.6s ease-out;
}
@keyframes filled {
   from {
      background: var(--ok-soft);
      border-color: var(--ok);
   }
   to {
      background: var(--surface);
   }
}