/* ============================================================
   V9 Add Item dock — ADD-ONLY layers on top of the shared item-form shell
   (styles/v9/components/item-form.css, scoped .v9-item-form, loaded first). The
   Add root carries `v9-item-form v9-add-dock`. Only the bits unique to adding
   live here: the kind selector, the "+ Add a photo" dropzone, and the live
   card-lookup results. The form shell (controls, type, identity, essentials,
   field grids, save bar, hero sizing) is shared with the Edit dock.
   ============================================================ */

/* ---- kind selector: fixed 4-up grid so it never wraps. ---- */
.v9-add-dock .v9-add-kinds { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--v9-space-1); }
.v9-add-dock .v9-add-kind {
  min-width: 0;
  padding: 0.4rem 0.2rem;
  border: 1px solid var(--v9-line);
  border-radius: var(--v9-r-pill);
  background: var(--v9-surface);
  color: var(--v9-text-mute);
  font: 500 var(--v9-text-xs) var(--v9-font-ui);
  cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--v9-t-micro) var(--v9-ease), border-color var(--v9-t-micro) var(--v9-ease), background-color var(--v9-t-micro) var(--v9-ease);
}
.v9-add-dock .v9-add-kind:hover { background: var(--v9-hover); }
.v9-add-dock .v9-add-kind[aria-pressed="true"] { border-color: var(--v9-accent); color: var(--v9-text); background: var(--v9-raised); }

/* ---- hero dropzone: slim "add photo" affordance when empty; becomes the card
        art (.has-art) once a card is picked. (Hero base sizing is shared.) ---- */
.v9-add-dock .v9-add-hero-zone {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 2.3rem; padding: 0.35rem var(--v9-space-2);
  border: 1px dashed var(--v9-line-strong);
  border-radius: var(--v9-r-pill);
  background: transparent;
  color: var(--v9-text-faint);
  cursor: pointer;
  transition: color var(--v9-t-micro) var(--v9-ease), border-color var(--v9-t-micro) var(--v9-ease);
}
.v9-add-dock .v9-add-hero-zone:hover { border-color: var(--v9-text-faint); color: var(--v9-text-mute); }
.v9-add-dock .card-detail-visual-stage.v9-add-hero.has-art .v9-add-hero-zone { display: none; }
.v9-add-dock .v9-add-hero-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.v9-add-dock .v9-add-hero-hint { pointer-events: none; font: 500 var(--v9-text-xs) var(--v9-font-ui); }

/* ---- live card-lookup results ---- */
.v9-add-dock .v9-add-lookup { display: grid; gap: var(--v9-space-1); }
.v9-add-dock .v9-add-lookup-status { color: var(--v9-text-faint); }
.v9-add-dock .v9-add-lookup-results { display: grid; gap: 2px; max-height: 13rem; overflow-y: auto; }
.v9-add-dock .v9-add-lookup-row {
  display: flex; align-items: center; gap: var(--v9-space-2);
  padding: var(--v9-space-1); border: 0; border-radius: var(--v9-r-sm);
  background: var(--v9-surface); cursor: pointer; text-align: left; color: var(--v9-text);
}
.v9-add-dock .v9-add-lookup-row:hover { background: var(--v9-hover); }
.v9-add-dock .v9-add-lookup-thumb { flex: 0 0 auto; width: 1.8rem; height: 2.5rem; object-fit: cover; border-radius: 3px; background: var(--v9-raised); }
.v9-add-dock .v9-add-lookup-meta { display: grid; gap: 1px; min-width: 0; }
.v9-add-dock .v9-add-lookup-meta strong { font-size: var(--v9-text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v9-add-dock .v9-add-lookup-meta .t-eyebrow { color: var(--v9-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v9-add-dock .v9-add-lookup-price { color: var(--v9-accent); font-size: var(--v9-text-sm); font-weight: 500; }