/* Snap & Name rules. The shell, gate, photo capture and footer come from /_kit/style.css. */
#names { list-style: none; counter-reset: n; padding: 0; margin: 0; display: grid; gap: 8px; }
#names li { counter-increment: n; }
.name {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  background: var(--nd-ground); border: 1px solid var(--nd-line); border-radius: var(--radius-control);
  padding: 8px 8px 8px 12px;
}
.name::before { content: counter(n, decimal-leading-zero); font-family: var(--font-mono); font-size: 12px; color: var(--nd-mark); flex: none; }
.name span { overflow-wrap: anywhere; flex: 1; font-weight: 500; }
.name button { flex: none; min-height: 44px; padding: 0 16px; font-size: 15px; background: var(--nd-surface); }
#colour-line { margin: 16px 0 0; }

.plant-id { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--nd-line); }
.plant-muted { color: var(--nd-muted); font-size: 14px; margin: 8px 0 0; }
.plant-candidates { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.plant-candidates li { background: var(--nd-ground); border: 1px solid var(--nd-line); border-radius: var(--radius-control); padding: 10px 12px; }
.plant-head { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.plant-name { overflow-wrap: anywhere; }
.plant-share { color: var(--nd-muted); font-family: var(--font-mono); font-size: 13px; }
.plant-low { color: var(--nd-muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--nd-line); border-radius: var(--radius-control); padding: 0 6px; }
.plant-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
/* Secondary controls, sized like the Copy buttons. */
button.small { min-height: 44px; padding: 0 16px; font-size: 15px; background: var(--nd-surface); }
.small-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-size: 15px; font-weight: 600; color: var(--nd-mark); text-underline-offset: 2px; }

details { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--nd-line); color: var(--nd-muted); font-size: 15px; }
summary { cursor: pointer; font-weight: 600; color: var(--nd-ink); min-height: 32px; }
details ul { padding-left: 20px; margin: 8px 0 0; }


@media (min-width: 60rem) {
  #suggest-form button.primary { justify-self: start; }
}