/* Compare plants: the side-by-side table (the grid comes from search.css's compare block, repeated here so the page
 * stands alone) plus the "add a plant" search. */
.compare{padding:20px}
.compare__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare__grid{display:grid;grid-template-columns:180px repeat(var(--cols),minmax(180px,1fr));gap:0 20px;min-width:0;align-items:start;padding:0 0 4px}
.compare__intro{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding-top:2px}
.compare__intro p{margin:0;font-size:14px;line-height:1.45}
.compare__plant{display:flex;flex-direction:column;gap:8px;padding-bottom:16px;color:var(--fg)}
.cmp__link{display:flex;flex-direction:column;gap:8px;color:inherit;text-decoration:none}
.compare__plant img,.compare__plant .ph{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:20px;--r:20px}
.compare__name{font-size:17px;font-weight:700;line-height:1.25}
.cmp__link:hover .compare__name{text-decoration:underline;text-underline-offset:3px}
.cmp__common{font-size:14px;margin-top:-4px}
.cmp__remove{align-self:flex-start}
.compare__label{padding:12px 0;border-top:1px solid var(--line);color:var(--muted);font-size:15px}
.compare__cell{padding:12px 0;border-top:1px solid var(--line);font:600 15px var(--mono);overflow-wrap:anywhere}
.pagehead .tabs--mini{padding:3px}
.pagehead .tabs--mini .tab{min-height:36px;padding:0 12px;font:600 12px var(--mono)}

.cmp__add{margin-top:16px;padding:22px 24px}
.cmp__addhelp{margin:0 0 12px;font-size:15px}
.cmp__search{display:flex;align-items:center;gap:10px;max-width:560px;min-height:52px;padding:0 8px 0 18px;border-radius:var(--r-pill);background:var(--tile);color:var(--muted)}
.cmp__search:focus-within{box-shadow:0 0 0 2px var(--accent)}
.cmp__search input{flex:1;min-width:0;min-height:48px;border:0;background:transparent;color:var(--fg);font-size:16px}
.cmp__search input:focus{outline:none}
.cmp__matches{list-style:none;margin:14px 0 0;padding:0}
.cmp__none{margin:12px 0 0;font-size:15px}
@media (max-width:860px){
  .compare{padding:16px}
  .compare__scroll{overflow:visible}
  .compare__grid{grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:0 12px}
  .compare__intro{grid-column:1 / -1;padding-bottom:12px}
  .compare__name{font-size:15px}
  .compare__label{grid-column:1 / -1;border-top:1px solid var(--line);padding-bottom:0;font:600 11px var(--mono);text-transform:uppercase}
  .compare__cell{border-top:0;padding-top:4px;font-size:13px}
  .cmp__add{padding:18px}
}