/* MAC-353: "Choose a saved item" picker (saved-item-picker.js).
   Kept out of styles.css so MAC-379's sidebar restyle can land without
   conflicts. Consumes the UI Foundations tokens from styles.css :root only;
   no new color values. Type uses the MAC-387 sidebar scale, since the picker
   lives in the sidebar. Selection uses the teal accent (MAC-379: teal is for
   links and selection). The picker flows inline inside its host section, so
   it never overflows the sidebar; the list scrolls within a bounded height. */

.saved-item-picker {
  display: grid;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.saved-item-picker-title {
  margin: 0;
  color: var(--ink);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-line-height);
}

.saved-item-picker-input {
  width: 100%;
  min-height: 36px;
  box-sizing: border-box;
  background: var(--surface-inspector-field);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line-height);
}

.saved-item-picker-input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

.saved-item-picker-status {
  margin: 0;
  color: var(--type-caption-color);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-line-height);
}

.saved-item-picker-status:empty {
  display: none;
}

.saved-item-picker-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: min(320px, 50vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.saved-item-picker-list[hidden] {
  display: none;
}

.saved-item-picker-option {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 8px;
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
}

.saved-item-picker-option:hover {
  background: var(--soft);
}

.saved-item-picker-option[aria-selected="true"] {
  background: var(--soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

.saved-item-picker-option[aria-disabled="true"] {
  cursor: default;
}

.saved-item-picker-option[aria-disabled="true"] .saved-item-picker-thumb,
.saved-item-picker-option[aria-disabled="true"] .saved-item-picker-text {
  opacity: var(--control-disabled-opacity);
}

.saved-item-picker-thumb {
  width: 36px;
  height: 36px;
  display: block;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--soft);
  overflow: hidden;
}

.saved-item-picker-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.saved-item-picker-text {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.saved-item-picker-name,
.saved-item-picker-brand {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-item-picker-name {
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line-height);
}

.saved-item-picker-brand {
  color: var(--type-caption-color);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-line-height);
}

.saved-item-picker-meta {
  display: grid;
  justify-items: end;
  gap: 1px;
  white-space: nowrap;
}

.saved-item-picker-price {
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line-height);
}

.saved-item-picker-added {
  color: var(--type-caption-color);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-line-height);
}

/* Done: neutral secondary (MAC-379 allows one primary per sidebar state,
   which belongs to the host). 44px minimum touch target. */
.saved-item-picker-footer {
  display: flex;
  justify-content: flex-end;
}

.saved-item-picker-done {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line-height);
}

.saved-item-picker-done:hover {
  background: var(--soft);
}

.saved-item-picker-done:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .saved-item-picker-list {
    scroll-behavior: auto;
  }
}