/* ===== Baby Name Combiner ===== */

.combiner-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);
}
.combiner-inputs{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:16px;
}
.combiner-field{ display:flex; flex-direction:column; gap:8px; }
.combiner-field label{
  display:flex; align-items:center; gap:6px;
  font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
}
.combiner-field label i{ font-size:11px; color:var(--accent-secondary); }
.combiner-field input{
  width:100%; border:none; background:transparent; color:var(--ink);
  font-family:'Baloo 2', sans-serif; font-weight:600; font-size:22px; padding:6px 4px 10px;
  border-bottom:2.5px solid var(--line-onpaper);
}
.combiner-field input::placeholder{ color:var(--ink-soft); font-style:italic; font-family:'Inter',sans-serif; font-weight:400; }
.combiner-field input:focus{ outline:none; border-bottom-color:var(--accent); }
.combiner-swap-wrap{ padding-bottom:12px; }
.combiner-swap-wrap .circle-btn{ width:42px; height:42px; }

/* .chip / .chip-row now live in tools.css (shared across all tools) */

.combo-grid{ grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); }
.combo-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;
}
@keyframes cardIn{ to{ opacity:1; transform:translateY(0);} }
.combo-card:hover{ transform:translateY(-4px); box-shadow:0 16px 30px -14px rgba(0,0,0,0.35); }
.combo-card .combo-name{
  font-family:'Baloo 2', sans-serif; font-weight:700; font-size:21px; color:var(--ink);
  word-break:break-word;
}
.combo-card .combo-source{
  margin-top:4px; font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.05em;
  color:var(--ink-soft); text-transform:uppercase;
}
.combo-actions{ display:flex; gap:8px; margin-top:14px; }
.combo-actions .circle-btn{ width:34px; height:34px; }
.combo-actions .circle-btn i{ font-size:14px; }
.combo-real-badge{
  margin-top:12px; display:inline-flex; align-items:center; gap:6px;
  background:rgba(46,196,182,0.15); color:var(--sage); border:1px solid rgba(46,196,182,0.4);
  border-radius:999px; padding:5px 11px; font-size:11.5px; font-weight:600; font-family:'Inter',sans-serif;
}
.combo-real-badge i{ font-size:11px; }

@media (max-width:640px){
  .combiner-inputs{ grid-template-columns:1fr; }
  .combiner-swap-wrap{ justify-self:center; padding-bottom:0; }
  .combiner-swap-wrap .circle-btn{ transform:rotate(90deg); }
}

/* Combiner result cards now use the exact index-page .card system. */
.combo-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));}
.combo-card{padding:24px 18px 18px;}
.combo-card .combo-extra-actions{display:flex;gap:8px;margin-top:14px;}
.combo-card .combo-extra-actions .circle-btn{width:34px;height:34px;}
.combo-card .check-result{margin-top:2px;}
@media(max-width:640px){.combo-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}}