/* ===== Sibling Name Matcher ===== */

.match-card{
  margin-top:32px; background:var(--paper); border-radius:26px; padding:26px;
  box-shadow:0 20px 40px -18px rgba(0,0,0,0.35);
  border:2px solid var(--line-onpaper);
}

.match-input-row{ display:flex; gap:14px; align-items:stretch; }
.match-field{
  flex:1; display:flex; align-items:center; gap:12px;
  background:var(--paper-dim); border:2px solid var(--line-onpaper); border-radius:16px; padding:4px 6px 4px 18px;
  transition:border-color .2s;
}
.match-field:focus-within{ border-color:var(--accent); }
.match-field i{ color:var(--accent-secondary); font-size:17px; }
.match-field input{
  flex:1; border:none; background:transparent; color:var(--ink);
  font-family:'Baloo 2', sans-serif; font-weight:600; font-size:19px; padding:13px 4px;
}
.match-field input::placeholder{ color:var(--ink-soft); font-style:italic; font-family:'Inter',sans-serif; font-weight:400; font-size:15px; }
.match-field input:focus{ outline:none; }
.match-input-row .combine-btn{ margin-top:0; width:auto; flex-shrink:0; padding-left:24px; padding-right:24px; }

.base-name-card{
  margin-top:20px; padding:16px 18px; border-radius:16px;
  background:linear-gradient(135deg, rgba(255,201,60,0.12), rgba(255,111,89,0.08));
  border:1.5px solid rgba(255,201,60,0.35);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.base-name-card .bnc-name{ font-family:'Baloo 2', sans-serif; font-weight:700; font-size:19px; color:var(--ink); }
.base-name-card .bnc-meta{ font-size:12.5px; color:var(--ink-soft); }
.base-name-card.not-found{
  background:var(--paper-dim); border-color:var(--line-onpaper); color:var(--ink-soft); font-size:13px;
}

@media (max-width:640px){
  .match-input-row{ flex-direction:column; }
  .match-input-row .combine-btn{ width:100%; }
}

/* Result cards — same base look as Combiner/Generator, plus a "why it matched" badge row */
.match-grid-card{
  position:relative; background:var(--paper); border-radius:20px;
  padding:22px 16px 16px; border:2px solid var(--line-onpaper);
  opacity:0; transform:translateY(10px); animation:cardIn .4s ease forwards;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.match-grid-card:hover{ transform:translateY(-4px); box-shadow:0 16px 30px -14px rgba(0,0,0,0.35); }
.match-grid-card .match-name{ font-family:'Baloo 2', sans-serif; font-weight:700; font-size:21px; color:var(--ink); word-break:break-word; }
.match-grid-card .match-meaning{
  color:var(--ink-soft); font-size:13.5px; line-height:1.55; margin-top:8px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.match-reasons{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.match-reason-badge{
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(46,196,182,0.14); color:var(--sage); border:1px solid rgba(46,196,182,0.35);
  border-radius:999px; padding:4px 10px; font-size:10.5px; font-weight:700;
  font-family:'Space Mono',monospace; letter-spacing:.03em; text-transform:uppercase;
}
.match-reason-badge.sound{ background:rgba(255,201,60,0.15); color:var(--gold); border-color:rgba(255,201,60,0.4); }
.match-grid-card .match-actions-row{ display:flex; gap:8px; margin-top:14px; }
.match-grid-card .match-actions-row .circle-btn{ width:34px; height:34px; }
.match-grid-card .match-actions-row .circle-btn i{ font-size:14px; }