/* ---------------------------------------------------------------------------
   listing.css — what was published, styled like the marketplace listing.
   ---------------------------------------------------------------------------
   The frame is deliberately product-page-shaped rather than console-shaped, so
   the operator recognises it as "the thing that is now on agri4all.com" without
   opening another tab. The metadata block underneath is console-shaped again,
   because seller, quota and URL are OUR facts, not the marketplace's.

   The dry run band is the loudest element in this file on purpose. Confusing
   "built a payload" with "posted to a live marketplace under a real seller's
   name" is the single most expensive mistake this screen could invite.
--------------------------------------------------------------------------- */

.listing {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  overflow: hidden;
}

/* ---- the dry run band ---------------------------------------------------- */
.listing__dry {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-3);
  background: var(--c-warn-soft);
  color: var(--c-warn-ink);
  font-size: var(--t-sm);
  border-bottom: 1px solid var(--c-warn);
}
.listing__dry[hidden] { display: none; }
.listing__dry strong { font-weight: var(--fw-bold); letter-spacing: .04em; }

.listing--dry { border-color: var(--c-warn); }
.listing--failed { border-color: var(--c-danger); }

/* ---- the marketplace frame ---------------------------------------------- */
.listing__frame {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-4);
}

.listing__cover {
  display: grid;
  place-items: center;
  gap: var(--s-1);
  align-content: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  background: var(--c-accent-soft);
  color: var(--c-accent);
  padding: var(--s-2);
  overflow: hidden;
}
.listing__art { line-height: 0; opacity: .6; }
.listing__art svg { width: 64px; height: 40px; }
.listing__imghost {
  font-size: var(--t-xs);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.listing__imghost[hidden] { display: none; }

.listing__main { min-width: 0; display: flex; flex-direction: column; gap: var(--s-3); }

.listing__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--s-3);
}
.listing__title {
  font-size: var(--t-xl);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  min-width: 0;
}
.listing__status { flex: none; }

.listing__price {
  font-size: var(--t-lg);
  font-weight: var(--fw-bold);
  color: var(--c-primary);
}

/* The rewritten copy with its <br> formatting honoured, exactly as the
   marketplace will render it. */
.listing__desc {
  font-size: var(--t-md);
  line-height: var(--lh-body);
  color: var(--c-fg);
  max-height: 18em;
  overflow-y: auto;
}
.listing__desc[hidden] { display: none; }

.listing__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border);
}
.listing__contact[hidden], .listing__where[hidden] { display: none; }
.listing__sublabel {
  margin-bottom: var(--s-1);
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-fg-faint);
}
.listing__contact-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  font-size: var(--t-sm);
  color: var(--c-fg-muted);
}
.listing__contact-name { font-weight: var(--fw-semi); color: var(--c-fg); }
.listing__location { font-size: var(--t-sm); color: var(--c-fg-muted); }

/* ---- our own metadata ---------------------------------------------------- */
.listing__meta {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3);
  background: var(--c-surface-2);
  border-top: 1px solid var(--c-border);
}
.listing__metarow {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--s-2);
  font-size: var(--t-sm);
}
.listing__metakey {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-fg-faint);
  padding-top: 2px;
}
.listing__seller { font-weight: var(--fw-medium); }
.listing__quota { color: var(--c-fg-muted); }
.listing__url { font-size: var(--t-xs); }
.listing__urltext { font-size: var(--t-xs); color: var(--c-fg-faint); }
.listing__url[hidden], .listing__urltext[hidden] { display: none; }
.listing__at { font-size: var(--t-xs); color: var(--c-fg-muted); }

.listing__error {
  margin: 0;
  padding: var(--s-2) var(--s-3);
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
  font-size: var(--t-sm);
  border-top: 1px solid var(--c-danger);
}
.listing__error[hidden] { display: none; }

/* A failed or dry-run create has no marketplace listing to look at, so the
   product frame steps back and the reason steps forward. */
.listing--failed .listing__frame { opacity: .7; }

@media (max-width: 860px) {
  .listing__frame { grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3); }
  .listing__title { font-size: var(--t-lg); }
  .listing__art svg { width: 48px; height: 30px; }
}
@media (max-width: 640px) {
  .listing__frame { grid-template-columns: minmax(0, 1fr); }
  .listing__cover { aspect-ratio: 16 / 7; }
  .listing__head { flex-direction: column; gap: var(--s-2); }
  .listing__foot { grid-template-columns: minmax(0, 1fr); }
  .listing__metarow { grid-template-columns: minmax(0, 1fr); gap: 0; }
}