/* ═══════════════════════════════════════════════════════════════════════
   component-match-suggest.css — Match-suggestion candidate cards
   ═══════════════════════════════════════════════════════════════════════
   "Suggest listings to add" — a confidence-scored candidate card with a
   "how did we match?" reveal + Link / Not-a-match actions, plus a manual
   add-box + result row. Built 7 Jun 2026 for Stock Central master view
   (#6), promoted to the design-system because it is generic enough to be
   reused by auto-detection review + duplicate-listing consolidation +
   reactivator candidate lists (any "candidate with a confidence score"
   surface). Tokens only — zero hardcoded hex, per Rule 15 + universal-CSS.
   ═══════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ── Grid of candidate cards ─────────────────────────────────── */
  .match-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
  @media (min-width: 720px) { .match-grid { grid-template-columns: 1fr 1fr; } }

  /* ── Candidate card ──────────────────────────────────────────── */
  .match-card {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 0.85rem;
    padding: 1.1rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-xl);
    background: var(--card-bg);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  }
  .match-card::before {            /* faint top accent strip */
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--color-primary-solid), transparent 70%);
    opacity: .55;
  }
  .match-card:hover {
    border-color: var(--colour-brand);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
  }

  .match-card__head { display: flex; align-items: flex-start; gap: .6rem; justify-content: space-between; }
  /* Single thumbnail — the master photo is already shown at the top of the
     page, so we never repeat it inside every suggestion card. */
  .match-card__thumb {
    flex: 0 0 auto; width: 60px; height: 60px; aspect-ratio: 1; object-fit: cover;
    border-radius: var(--radius-lg);
    background: var(--surface-dim); border: 1px solid var(--card-border);
    transition: transform .18s ease, border-color .18s ease;
  }
  .match-card:hover .match-card__thumb { transform: scale(1.03); border-color: var(--colour-brand); }
  .match-card__info { flex: 1 1 auto; min-width: 0; }
  .match-card__title { font-weight: 600; font-size: 14px; line-height: 1.4; color: var(--text); }
  .match-card__codes { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .3rem; }
  .match-card__meta { font-weight: 500; font-size: 12px; line-height: 1.4; color: var(--text-muted); margin-top: .25rem; }
  .match-card__meta b { color: var(--text-base); font-weight: 600; }

  /* SKU chip + Amazon deep-link */
  .match-sku {
    font-size: 12px; font-family: var(--font-family-mono, monospace);
    color: var(--text-base); background: var(--surface-dim);
    border: 1px solid var(--card-border); border-radius: var(--radius-sm);
    padding: .1rem .4rem; word-break: break-all;
  }
  .match-amz {
    text-decoration: none; font-weight: 700; color: var(--colour-brand);
    border: 1px solid var(--card-border); border-radius: var(--radius-sm);
    padding: 0 .35rem; line-height: 1.5;
  }
  .match-amz:hover { border-color: var(--colour-brand); }

  /* Confidence chip — success tone by default, info tone for mid scores */
  .match-conf {
    flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: .25rem;
    padding: .28rem .6rem; border-radius: var(--radius-pill); white-space: nowrap;
    font-weight: 700; font-size: 13px; line-height: 1.2;
    color: var(--tone-success-fg); background: var(--tone-success-bg);
    border: 1px solid var(--tone-success-border);
  }
  .match-conf small { font-weight: 600; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; opacity: .85; }
  .match-conf--mid { color: var(--tone-info-fg); background: var(--tone-info-bg); border-color: var(--tone-info-border); }

  /* "How did we match?" reveal */
  .match-card details {
    border-radius: var(--radius-md); border: 1px solid var(--card-border);
    background: var(--surface-dim); padding: 0 .75rem;
  }
  .match-card details[open] { border-color: var(--tone-info-border); }
  .match-card details summary {
    cursor: pointer; list-style: none; user-select: none;
    display: flex; align-items: center; gap: .35rem;
    font-weight: 600; font-size: 13px; line-height: 1.4; color: var(--colour-brand);
    padding: .55rem 0;
  }
  .match-card details summary::-webkit-details-marker { display: none; }
  .match-card details summary::after { content: "▾"; margin-left: auto; transition: transform .18s ease; font-size: 11px; }
  .match-card details[open] summary::after { transform: rotate(180deg); }

  .match-why {
    margin: 0; padding: 0 0 .65rem; list-style: none;
    font-weight: 400; font-size: 13px; line-height: 1.5; color: var(--text-base);
    display: flex; flex-direction: column; gap: .4rem;
  }
  .match-why li { display: flex; align-items: flex-start; gap: .5rem; }
  .match-why__k { flex: 0 0 4.6rem; color: var(--text-muted); font-weight: 600; }
  .match-why__v { flex: 1 1 auto; min-width: 0; }
  .match-why__v b { color: var(--text); font-weight: 600; }
  .match-why__tick { color: var(--tone-success-fg); font-weight: 700; }

  .match-card__actions { display: flex; gap: .5rem; margin-top: auto; flex-wrap: wrap; }

  /* ── Manual add-box + result rows ────────────────────────────── */
  .match-add { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; max-width: 540px; }
  .match-add .sc-input { flex: 1 1 220px; }
  .match-results { display: flex; flex-direction: column; gap: .5rem; }
  .match-result {
    display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
    padding: .6rem .75rem; border-radius: var(--radius-lg);
    background: var(--card-bg); border: 1px solid var(--card-border);
    border-left: 3px solid var(--tone-info-border);
  }
  .match-result__thumb { width: 46px; height: 46px; border-radius: var(--radius-md); object-fit: cover; background: var(--surface-dim); border: 1px solid var(--card-border); }
  .match-result__txt { font-weight: 600; font-size: 13px; line-height: 1.4; color: var(--text); min-width: 0; flex: 1 1 200px; }
  .match-result__codes { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .25rem; }
  .match-result__btn { margin-left: auto; }
  .match-result--linked { opacity: .55; }

  /* ── Motion / small-screen courtesies ────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .match-card, .match-card__thumb, .match-card details summary::after { transition: none; }
    .match-card:hover, .match-card:hover .match-card__thumb { transform: none; }
  }
  @media (max-width: 420px) {
    .match-card__head { flex-direction: column; align-items: stretch; }
    .match-conf { align-self: flex-start; }
    .match-why li { flex-direction: column; gap: .1rem; }
    .match-why__k { flex-basis: auto; }
    .match-result__btn { margin-left: 0; width: 100%; }
  }
}