/* Catalog matching (Tisch). Uses the shared tokens from application.css. */

.match-intake { margin-bottom: 1.25rem; }

.match-clients { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 1.25rem; }
.match-chip {
  border: 1px solid var(--rule-strong); border-radius: 999px; padding: 0.2rem 0.75rem;
  color: var(--ink-soft); text-decoration: none; background: var(--surface); font-size: 0.875rem;
}
.match-chip.is-active, .match-chip:hover { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-wash); }

.match-columns { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.match-teach { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); align-items: end; margin-top: 1rem; }
.match-recent li { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.4rem 0; border-bottom: 1px solid var(--rule); }

.match-request {
  margin: 0.5rem 0 0; padding: 0.6rem 0.9rem; border-left: 3px solid var(--accent);
  background: var(--surface-sunk); border-radius: var(--radius-small); white-space: pre-wrap;
}
.match-note { margin: 0.25rem 0; }
.match-reading { margin: 1rem 0 1.5rem; }
.match-fields { list-style: none; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.match-field {
  display: inline-flex; flex-wrap: wrap; gap: 0.35rem; align-items: baseline;
  border: 1px solid var(--rule); border-radius: var(--radius-small); padding: 0.3rem 0.6rem; background: var(--surface);
}
.match-field--memory { border-color: var(--accent); background: var(--accent-wash); }
.match-field__name { color: var(--muted); font-size: 0.8rem; }
.match-field__value { font-weight: 600; }
.match-field__text { color: var(--ink-soft); font-size: 0.8rem; }

.match-cards { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 1rem; }
.match-card {
  display: grid; grid-template-columns: auto 260px 1fr; gap: 1rem; align-items: start;
  padding: 1rem; min-width: 0;
}
.match-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.match-card--closest { border-style: dashed; }
.match-card__body, .match-card__specs { min-width: 0; overflow-wrap: anywhere; }
.match-card__pick input { accent-color: var(--accent); width: 1.25rem; height: 1.25rem; margin-top: 0.25rem; }
.match-card__specs { display: grid; gap: 0.35rem; margin: 0; padding: 0.75rem; background: var(--surface-sunk); border-radius: var(--radius-small); font-size: 0.85rem; }
.match-card__specs div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.5rem; }
.match-card__specs dt { color: var(--muted); }
.match-card__specs dd { margin: 0; font-weight: 600; color: var(--ink); }
.match-card__pn { font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--ink); }
.match-card__desc { margin: 0.25rem 0 0.5rem; }
.match-check--exact .match-check__status { color: var(--ready-ink); font-weight: 600; }
.match-check--near .match-check__status { color: var(--held-ink); font-weight: 600; }
.match-check--conflict .match-check__status { color: var(--nomatch-ink); font-weight: 600; }

.match-approve__bar {
  display: grid; gap: 1rem; grid-template-columns: 160px minmax(220px, 1fr) auto; align-items: end;
  border-top: 1px solid var(--rule); padding-top: 1rem;
}


@media (max-width: 720px) {
  .match-card { grid-template-columns: auto 1fr; }
  .match-card__specs { grid-column: 2; }
  .match-card__body { grid-column: 1 / -1; }
  .match-approve__bar { grid-template-columns: 1fr; }
}